From 6a367c1dec3a27b2be3cd8a86187ec525dda7fc1 Mon Sep 17 00:00:00 2001
From: 3252a8 <3252a8@proton.me>
Date: Mon, 11 May 2026 23:25:34 +0300
Subject: [PATCH] refactor: consolidate web app UI foundation

---
 bot/app/web/frontend/jsconfig.json            |  10 +
 bot/app/web/frontend/src/App.svelte           |   2 +-
 bot/app/web/frontend/src/PreviewBoard.svelte  |   4 +-
 .../web/frontend/src/admin/AdminPanel.svelte  |   2 +-
 .../src/admin/sections/AdsSection.svelte      |   4 +-
 .../admin/sections/BroadcastSection.svelte    |   2 +-
 .../src/admin/sections/PromosSection.svelte   |   4 +-
 .../src/admin/sections/SettingsSection.svelte |   2 +-
 .../src/admin/sections/StatsSection.svelte    |  66 ++--
 .../admin/sections/TariffEditorModal.svelte   |   4 +-
 .../src/admin/sections/UserDetailModal.svelte |   4 +-
 .../src/admin/sections/UsersSection.svelte    |   2 +-
 .../patterns/admin/AdminDashboardGrid.svelte  |  18 ++
 .../patterns/admin/AdminDashboardStack.svelte |  10 +
 .../patterns/admin/AdminEmptyState.svelte     |  11 +
 .../patterns/admin/AdminSectionHeader.svelte  |  11 +
 .../lib/components/patterns/admin/index.js    |   4 +
 .../components/{shadcn => ui}/badge.svelte    |   6 +-
 .../src/lib/components/ui/button.svelte       |  44 +--
 .../src/lib/components/ui/card.svelte         |   2 +-
 .../{shadcn => ui}/card/card-action.svelte    |   2 +-
 .../{shadcn => ui}/card/card-content.svelte   |   2 +-
 .../card/card-description.svelte              |   2 +-
 .../{shadcn => ui}/card/card-footer.svelte    |   2 +-
 .../{shadcn => ui}/card/card-header.svelte    |   2 +-
 .../{shadcn => ui}/card/card-title.svelte     |   2 +-
 .../{shadcn => ui}/card/card.svelte           |   2 +-
 .../components/{shadcn => ui}/card/index.js   |   0
 .../src/lib/components/ui/dialog.svelte       |   2 +-
 .../frontend/src/lib/components/ui/index.js   |   7 +
 .../src/lib/components/ui/input.svelte        |   2 +-
 .../src/lib/components/ui/primitives.js       |   1 +
 bot/app/web/frontend/src/styles.css           |   2 +
 bot/app/web/frontend/src/styles/admin.css     | 172 -----------
 .../web/frontend/src/styles/components.css    | 182 +++++++++++
 bot/app/web/frontend/src/styles/tailwind.css  |  31 ++
 .../frontend/src/webapp/PaymentDialogs.svelte |  10 +-
 .../frontend/src/webapp/TariffDialogs.svelte  |   6 +-
 .../src/webapp/auth/AuthScreen.svelte         |   8 +-
 .../src/webapp/screens/DevicesScreen.svelte   |   4 +-
 .../src/webapp/screens/HomeScreen.svelte      |   4 +-
 .../src/webapp/screens/InviteScreen.svelte    |   8 +-
 .../src/webapp/screens/SettingsScreen.svelte  |   6 +-
 bot/app/web/frontend/vite.config.mjs          |   9 +-
 components.json                               |  15 +
 package-lock.json                             | 292 ++++++++++++++++++
 package.json                                  |   1 +
 47 files changed, 713 insertions(+), 275 deletions(-)
 create mode 100644 bot/app/web/frontend/jsconfig.json
 create mode 100644 bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardGrid.svelte
 create mode 100644 bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardStack.svelte
 create mode 100644 bot/app/web/frontend/src/lib/components/patterns/admin/AdminEmptyState.svelte
 create mode 100644 bot/app/web/frontend/src/lib/components/patterns/admin/AdminSectionHeader.svelte
 create mode 100644 bot/app/web/frontend/src/lib/components/patterns/admin/index.js
 rename bot/app/web/frontend/src/lib/components/{shadcn => ui}/badge.svelte (61%)
 rename bot/app/web/frontend/src/lib/components/{shadcn => ui}/card/card-action.svelte (81%)
 rename bot/app/web/frontend/src/lib/components/{shadcn => ui}/card/card-content.svelte (81%)
 rename bot/app/web/frontend/src/lib/components/{shadcn => ui}/card/card-description.svelte (82%)
 rename bot/app/web/frontend/src/lib/components/{shadcn => ui}/card/card-footer.svelte (81%)
 rename bot/app/web/frontend/src/lib/components/{shadcn => ui}/card/card-header.svelte (81%)
 rename bot/app/web/frontend/src/lib/components/{shadcn => ui}/card/card-title.svelte (81%)
 rename bot/app/web/frontend/src/lib/components/{shadcn => ui}/card/card.svelte (80%)
 rename bot/app/web/frontend/src/lib/components/{shadcn => ui}/card/index.js (100%)
 create mode 100644 bot/app/web/frontend/src/lib/components/ui/index.js
 create mode 100644 bot/app/web/frontend/src/lib/components/ui/primitives.js
 create mode 100644 bot/app/web/frontend/src/styles/components.css
 create mode 100644 bot/app/web/frontend/src/styles/tailwind.css
 create mode 100644 components.json

diff --git a/bot/app/web/frontend/jsconfig.json b/bot/app/web/frontend/jsconfig.json
new file mode 100644
index 0000000..145e4ec
--- /dev/null
+++ b/bot/app/web/frontend/jsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "$lib/*": ["src/lib/*"],
+      "$components/*": ["src/lib/components/*"]
+    }
+  },
+  "include": ["src/**/*"]
+}
diff --git a/bot/app/web/frontend/src/App.svelte b/bot/app/web/frontend/src/App.svelte
index eb6c111..de4f3db 100644
--- a/bot/app/web/frontend/src/App.svelte
+++ b/bot/app/web/frontend/src/App.svelte
@@ -4,7 +4,7 @@
   import { createBillingStore } from "./lib/webapp/stores/billingStore.js";
   import { createDevicesStore } from "./lib/webapp/stores/devicesStore.js";
   import { createAccountStore } from "./lib/webapp/stores/accountStore.js";
-  import { Tooltip } from "bits-ui";
+  import { Tooltip } from "$components/ui/primitives.js";
 
   import BrandMark from "./BrandMark.svelte";
   import PreviewBoard from "./PreviewBoard.svelte";
diff --git a/bot/app/web/frontend/src/PreviewBoard.svelte b/bot/app/web/frontend/src/PreviewBoard.svelte
index feb94e0..cac8087 100644
--- a/bot/app/web/frontend/src/PreviewBoard.svelte
+++ b/bot/app/web/frontend/src/PreviewBoard.svelte
@@ -19,8 +19,8 @@
     Zap,
   } from "lucide-svelte";
 
-  import Button from "./lib/components/ui/button.svelte";
-  import Card from "./lib/components/ui/card.svelte";
+  import Button from "$components/ui/button.svelte";
+  import Card from "$components/ui/card.svelte";
   import BackTitle from "./preview/BackTitle.svelte";
   import PhoneFrame from "./preview/PhoneFrame.svelte";
   import PreviewMethods from "./preview/PreviewMethods.svelte";
diff --git a/bot/app/web/frontend/src/admin/AdminPanel.svelte b/bot/app/web/frontend/src/admin/AdminPanel.svelte
index baeebe3..66c5fb8 100644
--- a/bot/app/web/frontend/src/admin/AdminPanel.svelte
+++ b/bot/app/web/frontend/src/admin/AdminPanel.svelte
@@ -20,7 +20,7 @@
     UsersRound,
   } from "lucide-svelte";
   import { onMount, setContext } from "svelte";
-  import { Select } from "bits-ui";
+  import { Select } from "$components/ui/primitives.js";
 
   import BrandMark from "../BrandMark.svelte";
   import AdsSection from "./sections/AdsSection.svelte";
diff --git a/bot/app/web/frontend/src/admin/sections/AdsSection.svelte b/bot/app/web/frontend/src/admin/sections/AdsSection.svelte
index fc044dd..7dbe733 100644
--- a/bot/app/web/frontend/src/admin/sections/AdsSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/AdsSection.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Trash2 } from "lucide-svelte";
   import { getContext, onMount } from "svelte";
-  import Dialog from "../../lib/components/ui/dialog.svelte";
-  import { Label } from "bits-ui";
+  import Dialog from "$components/ui/dialog.svelte";
+  import { Label } from "$components/ui/primitives.js";
 
   export let at;
   export let fmtMoney;
diff --git a/bot/app/web/frontend/src/admin/sections/BroadcastSection.svelte b/bot/app/web/frontend/src/admin/sections/BroadcastSection.svelte
index 8b76503..645fd8d 100644
--- a/bot/app/web/frontend/src/admin/sections/BroadcastSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/BroadcastSection.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Send, ChevronDown, Check } from "lucide-svelte";
   import { getContext } from "svelte";
-  import { Label, Select } from "bits-ui";
+  import { Label, Select } from "$components/ui/primitives.js";
 
   export let at;
   export let optionLabel;
diff --git a/bot/app/web/frontend/src/admin/sections/PromosSection.svelte b/bot/app/web/frontend/src/admin/sections/PromosSection.svelte
index 081c187..12fcca4 100644
--- a/bot/app/web/frontend/src/admin/sections/PromosSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/PromosSection.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Trash2 } from "lucide-svelte";
   import { getContext, onMount } from "svelte";
-  import Dialog from "../../lib/components/ui/dialog.svelte";
-  import { Label } from "bits-ui";
+  import Dialog from "$components/ui/dialog.svelte";
+  import { Label } from "$components/ui/primitives.js";
 
   export let at;
   export let fmtDateShort;
diff --git a/bot/app/web/frontend/src/admin/sections/SettingsSection.svelte b/bot/app/web/frontend/src/admin/sections/SettingsSection.svelte
index 8befd51..4045df4 100644
--- a/bot/app/web/frontend/src/admin/sections/SettingsSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/SettingsSection.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ChevronRight, Eye, EyeOff, X } from "lucide-svelte";
-  import { Accordion, Switch } from "bits-ui";
+  import { Accordion, Switch } from "$components/ui/primitives.js";
   import { getContext, onMount } from "svelte";
 
   export let at;
diff --git a/bot/app/web/frontend/src/admin/sections/StatsSection.svelte b/bot/app/web/frontend/src/admin/sections/StatsSection.svelte
index a1659dc..b27003c 100644
--- a/bot/app/web/frontend/src/admin/sections/StatsSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/StatsSection.svelte
@@ -2,8 +2,14 @@
   import { Activity, Radio, Server, TrendingDown, TrendingUp } from "lucide-svelte";
   import { getContext, onMount } from "svelte";
 
-  import Badge from "../../lib/components/shadcn/badge.svelte";
-  import * as Card from "../../lib/components/shadcn/card/index.js";
+  import Badge from "$components/ui/badge.svelte";
+  import * as Card from "$components/ui/card/index.js";
+  import {
+    AdminDashboardGrid,
+    AdminDashboardStack,
+    AdminEmptyState,
+    AdminSectionHeader,
+  } from "$components/patterns/admin/index.js";
 
   export let at;
   export let fmtDate = (value) => value;
@@ -125,13 +131,11 @@
 </script>
 
 {#if statsError}
-  <div class="admin-empty">{at("stats_error", { error: statsError }, "")}</div>
+  <AdminEmptyState>{at("stats_error", { error: statsError }, "")}</AdminEmptyState>
 {:else if showSkeleton}
-  <div class="admin-cn-dashboard-stack">
-    <div class="admin-dashboard-section-head">
-      <h3>{at("stats_section_audience", {}, "")}</h3>
-    </div>
-    <div class="admin-cn-dashboard-grid admin-cn-dashboard-grid--3">
+  <AdminDashboardStack>
+    <AdminSectionHeader title={at("stats_section_audience", {}, "")} />
+    <AdminDashboardGrid columns={3}>
       {#each Array(3) as _, i (i)}
         <Card.Root class="admin-cn-card-skeleton">
           <Card.Header>
@@ -144,7 +148,7 @@
           </Card.Footer>
         </Card.Root>
       {/each}
-    </div>
+    </AdminDashboardGrid>
     <Card.Root class="admin-cn-card-skeleton">
       <Card.Header>
         <span class="admin-skeleton admin-skeleton-line admin-skeleton-line-short"></span>
@@ -156,9 +160,7 @@
         </div>
       </Card.Content>
     </Card.Root>
-    <div class="admin-dashboard-section-head">
-      <h3>{at("stats_recent_payments", {}, "")}</h3>
-    </div>
+    <AdminSectionHeader title={at("stats_recent_payments", {}, "")} />
     <div class="admin-table-wrap">
       <table class="admin-table admin-table-skeleton" aria-hidden="true">
         <thead>
@@ -185,15 +187,15 @@
         </tbody>
       </table>
     </div>
-  </div>
+  </AdminDashboardStack>
 {:else if stats}
-  <div class="admin-cn-dashboard-stack">
-    <div class="admin-dashboard-section-head">
-      <h3>{at("stats_section_audience", {}, "")}</h3>
-      <small>{at("stats_section_audience_hint", {}, "")}</small>
-    </div>
+  <AdminDashboardStack>
+    <AdminSectionHeader
+      title={at("stats_section_audience", {}, "")}
+      description={at("stats_section_audience_hint", {}, "")}
+    />
 
-    <div class="admin-cn-dashboard-grid admin-cn-dashboard-grid--3">
+    <AdminDashboardGrid columns={3}>
       <Card.Root>
         <Card.Header>
           <Card.Description>{at("stats_label_users", {}, "")}</Card.Description>
@@ -243,12 +245,12 @@
           <div class="admin-cn-card-footer-muted">{at("stats_card_inactive_caption", {}, "")}</div>
         </Card.Footer>
       </Card.Root>
-    </div>
+    </AdminDashboardGrid>
 
-    <div class="admin-dashboard-section-head">
-      <h3>{at("stats_section_revenue", {}, "")}</h3>
-      <small>{at("stats_section_revenue_hint", {}, "")}</small>
-    </div>
+    <AdminSectionHeader
+      title={at("stats_section_revenue", {}, "")}
+      description={at("stats_section_revenue_hint", {}, "")}
+    />
 
     <Card.Root>
       <Card.Header>
@@ -356,14 +358,10 @@
       </Card.Content>
     </Card.Root>
 
-    <div class="admin-dashboard-section-head">
-      <h3>{at("stats_section_panel", {}, "")}</h3>
-      {#if panelPayload?.error}
-        <small>{at("stats_panel_unavailable", {}, "")}</small>
-      {:else if panelMetrics}
-        <small>{at("stats_section_panel_hint", {}, "")}</small>
-      {/if}
-    </div>
+    <AdminSectionHeader
+      title={at("stats_section_panel", {}, "")}
+      description={panelPayload?.error ? at("stats_panel_unavailable", {}, "") : panelMetrics ? at("stats_section_panel_hint", {}, "") : ""}
+    />
 
     {#if panelPayload?.error}
       <p class="admin-muted" style="margin:0;">{at("stats_panel_unavailable_detail", {}, "")}</p>
@@ -511,10 +509,10 @@
               </tbody>
             </table>
           {:else}
-            <div class="admin-card-body"><span class="admin-muted">{at("no_data", {}, "")}</span></div>
+            <AdminEmptyState tone="card"><span class="admin-muted">{at("no_data", {}, "")}</span></AdminEmptyState>
           {/if}
         </div>
       </Card.Content>
     </Card.Root>
-  </div>
+  </AdminDashboardStack>
 {/if}
diff --git a/bot/app/web/frontend/src/admin/sections/TariffEditorModal.svelte b/bot/app/web/frontend/src/admin/sections/TariffEditorModal.svelte
index e2ac879..9f2ff32 100644
--- a/bot/app/web/frontend/src/admin/sections/TariffEditorModal.svelte
+++ b/bot/app/web/frontend/src/admin/sections/TariffEditorModal.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { Tabs, Select, Switch, Label } from "bits-ui";
-  import Dialog from "../../lib/components/ui/dialog.svelte";
+  import { Tabs, Select, Switch, Label } from "$components/ui/primitives.js";
+  import Dialog from "$components/ui/dialog.svelte";
   import { Check, ChevronDown, Plus, Save, Trash2, X } from "lucide-svelte";
   import { getContext } from "svelte";
   import { normalizeUuidList } from "../../lib/admin/tariffDraft.js";
diff --git a/bot/app/web/frontend/src/admin/sections/UserDetailModal.svelte b/bot/app/web/frontend/src/admin/sections/UserDetailModal.svelte
index e3f71c3..abb7384 100644
--- a/bot/app/web/frontend/src/admin/sections/UserDetailModal.svelte
+++ b/bot/app/web/frontend/src/admin/sections/UserDetailModal.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { Label, Select, Separator, Tabs } from "bits-ui";
-  import Dialog from "../../lib/components/ui/dialog.svelte";
+  import { Label, Select, Separator, Tabs } from "$components/ui/primitives.js";
+  import Dialog from "$components/ui/dialog.svelte";
   import {
     CalendarDays, Copy, CreditCard, ExternalLink, Eye, Info, Key,
     Mail, Map, MessageSquare, MousePointerClick, QrCode, RefreshCw, Send,
diff --git a/bot/app/web/frontend/src/admin/sections/UsersSection.svelte b/bot/app/web/frontend/src/admin/sections/UsersSection.svelte
index 9670610..4b94334 100644
--- a/bot/app/web/frontend/src/admin/sections/UsersSection.svelte
+++ b/bot/app/web/frontend/src/admin/sections/UsersSection.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Check, ChevronDown, ChevronLeft, ChevronRight } from "lucide-svelte";
-  import { Label, Select } from "bits-ui";
+  import { Label, Select } from "$components/ui/primitives.js";
   import { getContext, onMount } from "svelte";
 
   export let at = (key) => key;
diff --git a/bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardGrid.svelte b/bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardGrid.svelte
new file mode 100644
index 0000000..f438527
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardGrid.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  export let columns = 1;
+  let className = "";
+  export { className as class };
+</script>
+
+<div
+  class={cn(
+    "admin-cn-dashboard-grid",
+    columns === 3 && "admin-cn-dashboard-grid--3",
+    className,
+  )}
+  {...$$restProps}
+>
+  <slot />
+</div>
diff --git a/bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardStack.svelte b/bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardStack.svelte
new file mode 100644
index 0000000..b3f1b33
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardStack.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<div class={cn("admin-cn-dashboard-stack", className)} {...$$restProps}>
+  <slot />
+</div>
diff --git a/bot/app/web/frontend/src/lib/components/patterns/admin/AdminEmptyState.svelte b/bot/app/web/frontend/src/lib/components/patterns/admin/AdminEmptyState.svelte
new file mode 100644
index 0000000..c9fc8b4
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/components/patterns/admin/AdminEmptyState.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  export let tone = "default";
+  let className = "";
+  export { className as class };
+</script>
+
+<div class={cn(tone === "card" ? "admin-card-body" : "admin-empty", className)} {...$$restProps}>
+  <slot />
+</div>
diff --git a/bot/app/web/frontend/src/lib/components/patterns/admin/AdminSectionHeader.svelte b/bot/app/web/frontend/src/lib/components/patterns/admin/AdminSectionHeader.svelte
new file mode 100644
index 0000000..1cd5acc
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/components/patterns/admin/AdminSectionHeader.svelte
@@ -0,0 +1,11 @@
+<script>
+  export let title = "";
+  export let description = "";
+</script>
+
+<div class="admin-dashboard-section-head">
+  <h3>{title}</h3>
+  {#if description}
+    <small>{description}</small>
+  {/if}
+</div>
diff --git a/bot/app/web/frontend/src/lib/components/patterns/admin/index.js b/bot/app/web/frontend/src/lib/components/patterns/admin/index.js
new file mode 100644
index 0000000..a29622f
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/components/patterns/admin/index.js
@@ -0,0 +1,4 @@
+export { default as AdminDashboardGrid } from "./AdminDashboardGrid.svelte";
+export { default as AdminDashboardStack } from "./AdminDashboardStack.svelte";
+export { default as AdminEmptyState } from "./AdminEmptyState.svelte";
+export { default as AdminSectionHeader } from "./AdminSectionHeader.svelte";
diff --git a/bot/app/web/frontend/src/lib/components/shadcn/badge.svelte b/bot/app/web/frontend/src/lib/components/ui/badge.svelte
similarity index 61%
rename from bot/app/web/frontend/src/lib/components/shadcn/badge.svelte
rename to bot/app/web/frontend/src/lib/components/ui/badge.svelte
index b8b0a39..5a77bec 100644
--- a/bot/app/web/frontend/src/lib/components/shadcn/badge.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/badge.svelte
@@ -1,7 +1,7 @@
 <script>
-  import { cn } from "../../utils.js";
+  import { cn } from "$lib/utils.js";
 
-  /** @type {'default' | 'outline' | 'destructive'} */
+  /** @type {'default' | 'outline' | 'destructive' | 'success' | 'muted'} */
   export let variant = "default";
 
   let className = "";
@@ -14,6 +14,8 @@
     "admin-cn-badge",
     variant === "outline" && "admin-cn-badge-outline",
     variant === "destructive" && "admin-cn-badge-destructive",
+    variant === "success" && "admin-cn-badge-success",
+    variant === "muted" && "admin-cn-badge-muted",
     className,
   )}
   {...$$restProps}
diff --git a/bot/app/web/frontend/src/lib/components/ui/button.svelte b/bot/app/web/frontend/src/lib/components/ui/button.svelte
index 86ac524..f42d91e 100644
--- a/bot/app/web/frontend/src/lib/components/ui/button.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/button.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { cn } from "../../utils.js";
+  import { cva } from "class-variance-authority";
+  import { cn } from "$lib/utils.js";
 
   export let type = "button";
   export let variant = "default";
@@ -10,29 +11,36 @@
   let className = "";
   export { className as class };
 
-  const variants = {
-    default: "btn btn-primary",
-    secondary: "btn btn-secondary",
-    outline: "btn btn-outline",
-    ghost: "btn btn-ghost",
-    telegram: "btn btn-telegram",
-    icon: "btn btn-icon",
-  };
-
-  const sizes = {
-    default: "",
-    sm: "btn-sm",
-    lg: "btn-lg",
-    icon: "btn-square",
-  };
+  const buttonVariants = cva("btn", {
+    variants: {
+      variant: {
+        default: "btn-primary",
+        secondary: "btn-secondary",
+        outline: "btn-outline",
+        ghost: "btn-ghost",
+        telegram: "btn-telegram",
+        icon: "btn-icon",
+      },
+      size: {
+        default: "",
+        sm: "btn-sm",
+        lg: "btn-lg",
+        icon: "btn-square",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  });
 </script>
 
 {#if href}
-  <a class={cn(variants[variant], sizes[size], className)} {href} onclick={onclick} {...$$restProps}>
+  <a class={cn(buttonVariants({ variant, size }), className)} {href} onclick={onclick} {...$$restProps}>
     <slot />
   </a>
 {:else}
-  <button class={cn(variants[variant], sizes[size], className)} {type} {disabled} onclick={onclick} {...$$restProps}>
+  <button class={cn(buttonVariants({ variant, size }), className)} {type} {disabled} onclick={onclick} {...$$restProps}>
     <slot />
   </button>
 {/if}
diff --git a/bot/app/web/frontend/src/lib/components/ui/card.svelte b/bot/app/web/frontend/src/lib/components/ui/card.svelte
index 3156ce8..7f890f5 100644
--- a/bot/app/web/frontend/src/lib/components/ui/card.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/card.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   export let active = false;
   export let compact = false;
diff --git a/bot/app/web/frontend/src/lib/components/shadcn/card/card-action.svelte b/bot/app/web/frontend/src/lib/components/ui/card/card-action.svelte
similarity index 81%
rename from bot/app/web/frontend/src/lib/components/shadcn/card/card-action.svelte
rename to bot/app/web/frontend/src/lib/components/ui/card/card-action.svelte
index 9c12751..dd9a440 100644
--- a/bot/app/web/frontend/src/lib/components/shadcn/card/card-action.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/card/card-action.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };
diff --git a/bot/app/web/frontend/src/lib/components/shadcn/card/card-content.svelte b/bot/app/web/frontend/src/lib/components/ui/card/card-content.svelte
similarity index 81%
rename from bot/app/web/frontend/src/lib/components/shadcn/card/card-content.svelte
rename to bot/app/web/frontend/src/lib/components/ui/card/card-content.svelte
index 2882864..c718905 100644
--- a/bot/app/web/frontend/src/lib/components/shadcn/card/card-content.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/card/card-content.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };
diff --git a/bot/app/web/frontend/src/lib/components/shadcn/card/card-description.svelte b/bot/app/web/frontend/src/lib/components/ui/card/card-description.svelte
similarity index 82%
rename from bot/app/web/frontend/src/lib/components/shadcn/card/card-description.svelte
rename to bot/app/web/frontend/src/lib/components/ui/card/card-description.svelte
index d34074d..31c82b7 100644
--- a/bot/app/web/frontend/src/lib/components/shadcn/card/card-description.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/card/card-description.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };
diff --git a/bot/app/web/frontend/src/lib/components/shadcn/card/card-footer.svelte b/bot/app/web/frontend/src/lib/components/ui/card/card-footer.svelte
similarity index 81%
rename from bot/app/web/frontend/src/lib/components/shadcn/card/card-footer.svelte
rename to bot/app/web/frontend/src/lib/components/ui/card/card-footer.svelte
index 584a1fc..43432b7 100644
--- a/bot/app/web/frontend/src/lib/components/shadcn/card/card-footer.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/card/card-footer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };
diff --git a/bot/app/web/frontend/src/lib/components/shadcn/card/card-header.svelte b/bot/app/web/frontend/src/lib/components/ui/card/card-header.svelte
similarity index 81%
rename from bot/app/web/frontend/src/lib/components/shadcn/card/card-header.svelte
rename to bot/app/web/frontend/src/lib/components/ui/card/card-header.svelte
index 18773d1..5e8ea95 100644
--- a/bot/app/web/frontend/src/lib/components/shadcn/card/card-header.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/card/card-header.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };
diff --git a/bot/app/web/frontend/src/lib/components/shadcn/card/card-title.svelte b/bot/app/web/frontend/src/lib/components/ui/card/card-title.svelte
similarity index 81%
rename from bot/app/web/frontend/src/lib/components/shadcn/card/card-title.svelte
rename to bot/app/web/frontend/src/lib/components/ui/card/card-title.svelte
index df51521..0e0a922 100644
--- a/bot/app/web/frontend/src/lib/components/shadcn/card/card-title.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/card/card-title.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };
diff --git a/bot/app/web/frontend/src/lib/components/shadcn/card/card.svelte b/bot/app/web/frontend/src/lib/components/ui/card/card.svelte
similarity index 80%
rename from bot/app/web/frontend/src/lib/components/shadcn/card/card.svelte
rename to bot/app/web/frontend/src/lib/components/ui/card/card.svelte
index 0fa1d8f..009b4cd 100644
--- a/bot/app/web/frontend/src/lib/components/shadcn/card/card.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/card/card.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };
diff --git a/bot/app/web/frontend/src/lib/components/shadcn/card/index.js b/bot/app/web/frontend/src/lib/components/ui/card/index.js
similarity index 100%
rename from bot/app/web/frontend/src/lib/components/shadcn/card/index.js
rename to bot/app/web/frontend/src/lib/components/ui/card/index.js
diff --git a/bot/app/web/frontend/src/lib/components/ui/dialog.svelte b/bot/app/web/frontend/src/lib/components/ui/dialog.svelte
index 2621776..77ec261 100644
--- a/bot/app/web/frontend/src/lib/components/ui/dialog.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/dialog.svelte
@@ -1,6 +1,6 @@
 <script>
   import { X } from "lucide-svelte";
-  import { cn } from "../../utils.js";
+  import { cn } from "$lib/utils.js";
   import Button from "./button.svelte";
 
   export let open = false;
diff --git a/bot/app/web/frontend/src/lib/components/ui/index.js b/bot/app/web/frontend/src/lib/components/ui/index.js
new file mode 100644
index 0000000..5ee20ad
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/components/ui/index.js
@@ -0,0 +1,7 @@
+export { default as Badge } from "./badge.svelte";
+export { default as Button } from "./button.svelte";
+export { default as Dialog } from "./dialog.svelte";
+export { default as Input } from "./input.svelte";
+export { default as LegacyCard } from "./card.svelte";
+export * as Card from "./card/index.js";
+export { Accordion, Label, Select, Separator, Switch, Tabs, Tooltip } from "./primitives.js";
diff --git a/bot/app/web/frontend/src/lib/components/ui/input.svelte b/bot/app/web/frontend/src/lib/components/ui/input.svelte
index b959758..ff99b7f 100644
--- a/bot/app/web/frontend/src/lib/components/ui/input.svelte
+++ b/bot/app/web/frontend/src/lib/components/ui/input.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   export let value = "";
   export let type = "text";
diff --git a/bot/app/web/frontend/src/lib/components/ui/primitives.js b/bot/app/web/frontend/src/lib/components/ui/primitives.js
new file mode 100644
index 0000000..8d1de56
--- /dev/null
+++ b/bot/app/web/frontend/src/lib/components/ui/primitives.js
@@ -0,0 +1 @@
+export { Accordion, Label, Select, Separator, Switch, Tabs, Tooltip } from "bits-ui";
diff --git a/bot/app/web/frontend/src/styles.css b/bot/app/web/frontend/src/styles.css
index 696e053..69a3ae5 100644
--- a/bot/app/web/frontend/src/styles.css
+++ b/bot/app/web/frontend/src/styles.css
@@ -1,6 +1,8 @@
+@import "./styles/tailwind.css";
 @import "./styles/base.css";
 @import "./styles/controls.css";
 @import "./styles/dialogs.css";
+@import "./styles/components.css";
 @import "./styles/webapp.css";
 @import "./styles/admin.css";
 @import "./styles/admin-controls.css";
diff --git a/bot/app/web/frontend/src/styles/admin.css b/bot/app/web/frontend/src/styles/admin.css
index e7b0de3..3ed1735 100644
--- a/bot/app/web/frontend/src/styles/admin.css
+++ b/bot/app/web/frontend/src/styles/admin.css
@@ -412,178 +412,6 @@
   font-size: 12px;
 }
 
-/* shadcn-svelte–style primitives (dashboard example), themed for admin — no Tailwind */
-
-.admin-cn-dashboard-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  min-width: 0;
-}
-
-.admin-cn-dashboard-grid {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: minmax(0, 1fr);
-}
-
-@media (min-width: 720px) {
-  .admin-cn-dashboard-grid--3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-.admin-cn-card[data-slot="card"] {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  border-radius: 12px;
-  border: 1px solid var(--admin-border);
-  background: var(--admin-surface);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  position: relative;
-  overflow: hidden;
-}
-
-.admin-cn-card-header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  grid-template-rows: auto auto;
-  align-items: flex-start;
-  gap: 4px 12px;
-  padding: 14px 16px 0;
-}
-
-.admin-cn-card-header > [data-slot="card-description"] {
-  grid-column: 1;
-  grid-row: 1;
-}
-
-.admin-cn-card-header > [data-slot="card-title"] {
-  grid-column: 1;
-  grid-row: 2;
-}
-
-.admin-cn-card-header > [data-slot="card-action"] {
-  grid-column: 2;
-  grid-row: 1 / span 2;
-  align-self: flex-start;
-  justify-self: end;
-}
-
-.admin-cn-card-header--lead > [data-slot="card-title"] {
-  grid-row: 1;
-}
-
-.admin-cn-card-header--lead > [data-slot="card-description"] {
-  grid-row: 2;
-}
-
-.admin-cn-card-description {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--admin-muted);
-}
-
-.admin-cn-card-title {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  color: var(--admin-text);
-  font-variant-numeric: tabular-nums;
-  line-height: 1.15;
-}
-
-.admin-cn-card-title--section {
-  font-size: 1.05rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.admin-cn-card-skeleton {
-  min-height: 132px;
-}
-
-@media (min-width: 900px) {
-  .admin-cn-card-title {
-    font-size: 1.65rem;
-  }
-}
-
-.admin-cn-card-footer {
-  padding: 12px 16px 14px;
-  margin-top: auto;
-  border-top: 1px solid color-mix(in srgb, var(--admin-border) 70%, transparent);
-}
-
-.admin-cn-card-footer--stack {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  font-size: 13px;
-}
-
-.admin-cn-card-footer-primary {
-  font-weight: 600;
-  color: var(--admin-text);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.admin-cn-card-footer-muted {
-  color: var(--admin-muted);
-  font-size: 12px;
-  line-height: 1.35;
-}
-
-.admin-cn-card-content {
-  padding: 12px 16px 14px;
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.admin-cn-card-content--flush {
-  padding-top: 4px;
-}
-
-.admin-cn-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1;
-  border: 1px solid var(--admin-border);
-  background: color-mix(in srgb, var(--admin-surface-2) 88%, var(--admin-bg));
-  color: var(--admin-text);
-}
-
-.admin-cn-badge :global(svg) {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-}
-
-.admin-cn-badge-outline {
-  background: transparent;
-  border-color: var(--admin-border);
-  color: var(--admin-muted);
-}
-
-.admin-cn-badge-destructive {
-  background: color-mix(in srgb, #ff6b6b 16%, var(--admin-surface));
-  border-color: color-mix(in srgb, #ff6b6b 35%, var(--admin-border));
-  color: color-mix(in srgb, #ff6b6b 92%, var(--admin-text));
-}
-
 .admin-dashboard-section {
   margin-top: 20px;
 }
diff --git a/bot/app/web/frontend/src/styles/components.css b/bot/app/web/frontend/src/styles/components.css
new file mode 100644
index 0000000..a611d43
--- /dev/null
+++ b/bot/app/web/frontend/src/styles/components.css
@@ -0,0 +1,182 @@
+/* Shared shadcn-svelte style primitives, themed for the local admin palette. */
+
+.admin-cn-dashboard-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+}
+
+.admin-cn-dashboard-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@media (min-width: 720px) {
+  .admin-cn-dashboard-grid--3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.admin-cn-card[data-slot="card"] {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: 12px;
+  border: 1px solid var(--admin-border);
+  background: var(--admin-surface);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+}
+
+.admin-cn-card-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
+  align-items: flex-start;
+  gap: 4px 12px;
+  padding: 14px 16px 0;
+}
+
+.admin-cn-card-header > [data-slot="card-description"] {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.admin-cn-card-header > [data-slot="card-title"] {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.admin-cn-card-header > [data-slot="card-action"] {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: flex-start;
+  justify-self: end;
+}
+
+.admin-cn-card-header--lead > [data-slot="card-title"] {
+  grid-row: 1;
+}
+
+.admin-cn-card-header--lead > [data-slot="card-description"] {
+  grid-row: 2;
+}
+
+.admin-cn-card-description {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--admin-muted);
+}
+
+.admin-cn-card-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--admin-text);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+}
+
+.admin-cn-card-title--section {
+  font-size: 1.05rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.admin-cn-card-skeleton {
+  min-height: 132px;
+}
+
+@media (min-width: 900px) {
+  .admin-cn-card-title {
+    font-size: 1.65rem;
+  }
+}
+
+.admin-cn-card-footer {
+  padding: 12px 16px 14px;
+  margin-top: auto;
+  border-top: 1px solid color-mix(in srgb, var(--admin-border) 70%, transparent);
+}
+
+.admin-cn-card-footer--stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  font-size: 13px;
+}
+
+.admin-cn-card-footer-primary {
+  font-weight: 600;
+  color: var(--admin-text);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.admin-cn-card-footer-muted {
+  color: var(--admin-muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.admin-cn-card-content {
+  padding: 12px 16px 14px;
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.admin-cn-card-content--flush {
+  padding-top: 4px;
+}
+
+.admin-cn-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  border: 1px solid var(--admin-border);
+  background: color-mix(in srgb, var(--admin-surface-2) 88%, var(--admin-bg));
+  color: var(--admin-text);
+}
+
+.admin-cn-badge :global(svg) {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.admin-cn-badge-outline {
+  background: transparent;
+  border-color: var(--admin-border);
+  color: var(--admin-muted);
+}
+
+.admin-cn-badge-destructive {
+  background: color-mix(in srgb, var(--danger) 16%, var(--admin-surface));
+  border-color: color-mix(in srgb, var(--danger) 35%, var(--admin-border));
+  color: color-mix(in srgb, var(--danger) 92%, var(--admin-text));
+}
+
+.admin-cn-badge-success {
+  background: color-mix(in srgb, var(--accent) 14%, var(--admin-surface));
+  border-color: color-mix(in srgb, var(--accent) 32%, var(--admin-border));
+  color: color-mix(in srgb, var(--accent) 88%, var(--admin-text));
+}
+
+.admin-cn-badge-muted {
+  background: color-mix(in srgb, var(--admin-surface-2) 70%, var(--admin-bg));
+  color: var(--admin-muted);
+}
diff --git a/bot/app/web/frontend/src/styles/tailwind.css b/bot/app/web/frontend/src/styles/tailwind.css
new file mode 100644
index 0000000..dc3be08
--- /dev/null
+++ b/bot/app/web/frontend/src/styles/tailwind.css
@@ -0,0 +1,31 @@
+@layer theme, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@source "../**/*.{svelte,js}";
+
+@theme {
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", monospace;
+
+  --color-background: var(--bg);
+  --color-foreground: var(--text);
+  --color-muted: var(--muted);
+  --color-dim: var(--dim);
+  --color-border: var(--border);
+  --color-ring: var(--admin-ring);
+  --color-accent: var(--accent);
+  --color-destructive: var(--danger);
+  --color-admin-bg: var(--admin-bg);
+  --color-admin-surface: var(--admin-surface);
+  --color-admin-surface-2: var(--admin-surface-2);
+  --color-admin-elev: var(--admin-elev);
+  --color-admin-border: var(--admin-border);
+  --color-admin-text: var(--admin-text);
+  --color-admin-muted: var(--admin-muted);
+  --color-admin-dim: var(--admin-dim);
+
+  --radius-card: 12px;
+  --radius-control: var(--radius);
+}
diff --git a/bot/app/web/frontend/src/webapp/PaymentDialogs.svelte b/bot/app/web/frontend/src/webapp/PaymentDialogs.svelte
index 19f1b5c..a5bc944 100644
--- a/bot/app/web/frontend/src/webapp/PaymentDialogs.svelte
+++ b/bot/app/web/frontend/src/webapp/PaymentDialogs.svelte
@@ -1,11 +1,11 @@
 <script>
   import { ArrowLeft, CheckCircle2, CircleX, LockKeyhole, RefreshCw, TriangleAlert } from "lucide-svelte";
-  import { Tooltip } from "bits-ui";
+  import { Tooltip } from "$components/ui/primitives.js";
 
-  import Button from "../lib/components/ui/button.svelte";
-  import Card from "../lib/components/ui/card.svelte";
-  import Dialog from "../lib/components/ui/dialog.svelte";
-  import Input from "../lib/components/ui/input.svelte";
+  import Button from "$components/ui/button.svelte";
+  import Card from "$components/ui/card.svelte";
+  import Dialog from "$components/ui/dialog.svelte";
+  import Input from "$components/ui/input.svelte";
   import {
     planKey as planKeyFn,
     planDisplayTitle as planDisplayTitleFn,
diff --git a/bot/app/web/frontend/src/webapp/TariffDialogs.svelte b/bot/app/web/frontend/src/webapp/TariffDialogs.svelte
index 83910bf..7d59b08 100644
--- a/bot/app/web/frontend/src/webapp/TariffDialogs.svelte
+++ b/bot/app/web/frontend/src/webapp/TariffDialogs.svelte
@@ -1,7 +1,7 @@
 <script>
   import { ArrowRight, CheckCircle2, LockKeyhole } from "lucide-svelte";
 
-  import Button from "../lib/components/ui/button.svelte";
+  import Button from "$components/ui/button.svelte";
   import {
     planKey as planKeyFn,
     planUnitHint as planUnitHintFn,
@@ -12,8 +12,8 @@
   import { formatCompactNumber } from "../lib/webapp/formatters.js";
   import { Bitcoin, CreditCard } from "lucide-svelte";
 
-  import Card from "../lib/components/ui/card.svelte";
-  import Dialog from "../lib/components/ui/dialog.svelte";
+  import Card from "$components/ui/card.svelte";
+  import Dialog from "$components/ui/dialog.svelte";
 
   export let applyTariffChange = () => {};
   export let changeConfirmOpen = false;
diff --git a/bot/app/web/frontend/src/webapp/auth/AuthScreen.svelte b/bot/app/web/frontend/src/webapp/auth/AuthScreen.svelte
index 98befb5..14b68aa 100644
--- a/bot/app/web/frontend/src/webapp/auth/AuthScreen.svelte
+++ b/bot/app/web/frontend/src/webapp/auth/AuthScreen.svelte
@@ -1,11 +1,11 @@
 <script>
   import { ArrowLeft, Mail, RefreshCw, Send, TriangleAlert } from "lucide-svelte";
-  import { Tooltip } from "bits-ui";
+  import { Tooltip } from "$components/ui/primitives.js";
 
-  import Button from "../../lib/components/ui/button.svelte";
+  import Button from "$components/ui/button.svelte";
   import BrandMark from "../../BrandMark.svelte";
-  import Card from "../../lib/components/ui/card.svelte";
-  import Input from "../../lib/components/ui/input.svelte";
+  import Card from "$components/ui/card.svelte";
+  import Input from "$components/ui/input.svelte";
 
   export let screen;
   export let CFG;
diff --git a/bot/app/web/frontend/src/webapp/screens/DevicesScreen.svelte b/bot/app/web/frontend/src/webapp/screens/DevicesScreen.svelte
index a9c7814..7a17000 100644
--- a/bot/app/web/frontend/src/webapp/screens/DevicesScreen.svelte
+++ b/bot/app/web/frontend/src/webapp/screens/DevicesScreen.svelte
@@ -1,8 +1,8 @@
 <script>
   import { CircleX, Plus, RefreshCw, Smartphone } from "lucide-svelte";
 
-  import Button from "../../lib/components/ui/button.svelte";
-  import Card from "../../lib/components/ui/card.svelte";
+  import Button from "$components/ui/button.svelte";
+  import Card from "$components/ui/card.svelte";
   import { devicesCountLabel, devicesLimitLabel, devicesPercent } from "../../lib/webapp/devicesLabels.js";
 
   export let devicesBusy = false;
diff --git a/bot/app/web/frontend/src/webapp/screens/HomeScreen.svelte b/bot/app/web/frontend/src/webapp/screens/HomeScreen.svelte
index e6c40ea..3a5cd43 100644
--- a/bot/app/web/frontend/src/webapp/screens/HomeScreen.svelte
+++ b/bot/app/web/frontend/src/webapp/screens/HomeScreen.svelte
@@ -2,8 +2,8 @@
   import { CheckCircle2, ChevronsUpDown, CircleX, Database, Download, Gift, RefreshCw } from "lucide-svelte";
 
   import BrandMark from "../../BrandMark.svelte";
-  import Button from "../../lib/components/ui/button.svelte";
-  import Card from "../../lib/components/ui/card.svelte";
+  import Button from "$components/ui/button.svelte";
+  import Card from "$components/ui/card.svelte";
   import { formatTrafficGb } from "../../lib/webapp/formatters.js";
   import {
     trafficPercent as trafficPercentFn,
diff --git a/bot/app/web/frontend/src/webapp/screens/InviteScreen.svelte b/bot/app/web/frontend/src/webapp/screens/InviteScreen.svelte
index dd39798..433bc94 100644
--- a/bot/app/web/frontend/src/webapp/screens/InviteScreen.svelte
+++ b/bot/app/web/frontend/src/webapp/screens/InviteScreen.svelte
@@ -1,10 +1,10 @@
 <script>
   import { Copy, Gift, Ticket, TriangleAlert } from "lucide-svelte";
-  import { Tooltip } from "bits-ui";
+  import { Tooltip } from "$components/ui/primitives.js";
 
-  import Button from "../../lib/components/ui/button.svelte";
-  import Card from "../../lib/components/ui/card.svelte";
-  import Input from "../../lib/components/ui/input.svelte";
+  import Button from "$components/ui/button.svelte";
+  import Card from "$components/ui/card.svelte";
+  import Input from "$components/ui/input.svelte";
 
   export let referral = {};
   export let referralBonusDetails = [];
diff --git a/bot/app/web/frontend/src/webapp/screens/SettingsScreen.svelte b/bot/app/web/frontend/src/webapp/screens/SettingsScreen.svelte
index c7c572e..db1a774 100644
--- a/bot/app/web/frontend/src/webapp/screens/SettingsScreen.svelte
+++ b/bot/app/web/frontend/src/webapp/screens/SettingsScreen.svelte
@@ -1,9 +1,9 @@
 <script>
   import { ArrowRight, Check, CheckCircle2, ChevronsUpDown, FileText, Globe2, Mail, Send, Shield, UserRound } from "lucide-svelte";
-  import { Select } from "bits-ui";
+  import { Select } from "$components/ui/primitives.js";
 
-  import Button from "../../lib/components/ui/button.svelte";
-  import Card from "../../lib/components/ui/card.svelte";
+  import Button from "$components/ui/button.svelte";
+  import Card from "$components/ui/card.svelte";
 
   export let currentLang = "ru";
   export let currentLanguageOption = null;
diff --git a/bot/app/web/frontend/vite.config.mjs b/bot/app/web/frontend/vite.config.mjs
index a3d8952..98ca952 100644
--- a/bot/app/web/frontend/vite.config.mjs
+++ b/bot/app/web/frontend/vite.config.mjs
@@ -1,6 +1,7 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
+import tailwindcss from "@tailwindcss/vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { defineConfig } from "vite";
 
@@ -8,7 +9,13 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const templateDir = path.resolve(__dirname, "../templates");
 
 export default defineConfig({
-  plugins: [svelte()],
+  resolve: {
+    alias: {
+      $lib: path.resolve(__dirname, "src/lib"),
+      $components: path.resolve(__dirname, "src/lib/components"),
+    },
+  },
+  plugins: [tailwindcss(), svelte()],
   build: {
     outDir: templateDir,
     emptyOutDir: false,
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..246776b
--- /dev/null
+++ b/components.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "new-york",
+  "tailwind": {
+    "config": "",
+    "css": "bot/app/web/frontend/src/styles.css",
+    "baseColor": "slate"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils",
+    "ui": "$lib/components/ui",
+    "hooks": "$lib/hooks"
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 183d183..b7955f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^7.0.0",
         "@tailwindcss/cli": "4.2.4",
+        "@tailwindcss/vite": "^4.3.0",
         "bits-ui": "^2.18.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -1550,6 +1551,297 @@
         "node": ">= 20"
       }
     },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.0.tgz",
+      "integrity": "sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.0",
+        "@tailwindcss/oxide": "4.3.0",
+        "tailwindcss": "4.3.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/node": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz",
+      "integrity": "sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.21.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.0"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.0.tgz",
+      "integrity": "sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.0",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.0",
+        "@tailwindcss/oxide-darwin-x64": "4.3.0",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.0",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.0",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.0",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.0",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.0",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.0",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.0",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.0"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.0.tgz",
+      "integrity": "sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.0.tgz",
+      "integrity": "sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.0.tgz",
+      "integrity": "sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.0.tgz",
+      "integrity": "sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.0.tgz",
+      "integrity": "sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.0.tgz",
+      "integrity": "sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.0.tgz",
+      "integrity": "sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.0.tgz",
+      "integrity": "sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.0.tgz",
+      "integrity": "sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.0.tgz",
+      "integrity": "sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.10.0",
+        "@emnapi/runtime": "^1.10.0",
+        "@emnapi/wasi-threads": "^1.2.1",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.0.tgz",
+      "integrity": "sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.0.tgz",
+      "integrity": "sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/tailwindcss": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
+      "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
diff --git a/package.json b/package.json
index 2c5dbc7..40da9d1 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/cli": "4.2.4",
+    "@tailwindcss/vite": "^4.3.0",
     "bits-ui": "^2.18.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",