feat(auth,privacy,web): step-by-step login, privacy settings persistence, TOTP QR, and API docs

2026-03-08 12:09:53 +03:00
parent 1546ae7381
commit 79baadb522
19 changed files with 2034 additions and 79 deletions
--- a/web/src/api/auth.ts
+++ b/web/src/api/auth.ts
@@ -33,6 +33,18 @@ export async function revokeAllSessions(): Promise<void> {
  await http.delete("/auth/sessions");
 }

+export interface EmailStatusResponse {
+  email: string;
+  registered: boolean;
+  email_verified: boolean;
+  twofa_enabled: boolean;
+}
+
+export async function checkEmailStatus(email: string): Promise<EmailStatusResponse> {
+  const { data } = await http.get<EmailStatusResponse>("/auth/check-email", { params: { email } });
+  return data;
+}
+
 export interface TwoFactorSetupResponse {
  secret: string;
  otpauth_url: string;
--- a/web/src/api/users.ts
+++ b/web/src/api/users.ts
@@ -14,6 +14,9 @@ interface UserProfileUpdatePayload {
  bio?: string | null;
  avatar_url?: string | null;
  allow_private_messages?: boolean;
+  privacy_last_seen?: "everyone" | "contacts" | "nobody";
+  privacy_avatar?: "everyone" | "contacts" | "nobody";
+  privacy_group_invites?: "everyone" | "contacts";
 }

 export async function updateMyProfile(payload: UserProfileUpdatePayload): Promise<AuthUser> {
--- a/web/src/chat/types.ts
+++ b/web/src/chat/types.ts
@@ -79,6 +79,9 @@ export interface AuthUser {
  email_verified: boolean;
  twofa_enabled?: boolean;
  allow_private_messages: boolean;
+  privacy_last_seen?: "everyone" | "contacts" | "nobody";
+  privacy_avatar?: "everyone" | "contacts" | "nobody";
+  privacy_group_invites?: "everyone" | "contacts";
  created_at: string;
  updated_at: string;
 }
--- a/web/src/components/AuthPanel.tsx
+++ b/web/src/components/AuthPanel.tsx
@@ -1,18 +1,20 @@
+import axios from "axios";
 import { FormEvent, useState } from "react";
-import { registerRequest } from "../api/auth";
+import { checkEmailStatus, registerRequest } from "../api/auth";
 import { useAuthStore } from "../store/authStore";

-type Mode = "login" | "register";
+type Step = "email" | "password" | "register" | "otp";

 export function AuthPanel() {
  const login = useAuthStore((s) => s.login);
  const loading = useAuthStore((s) => s.loading);
-  const [mode, setMode] = useState<Mode>("login");
+  const [step, setStep] = useState<Step>("email");
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [otpCode, setOtpCode] = useState("");
+  const [checkingEmail, setCheckingEmail] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

@@ -21,47 +23,135 @@ export function AuthPanel() {
    setError(null);
    setSuccess(null);
    try {
-      if (mode === "register") {
-        await registerRequest(email, name, username, password);
-        setSuccess("Registered. Check email verification, then login.");
-        setMode("login");
+      if (step === "email") {
+        const normalizedEmail = email.trim().toLowerCase();
+        if (!normalizedEmail) {
+          setError("Enter email.");
+          return;
+        }
+        setCheckingEmail(true);
+        try {
+          const status = await checkEmailStatus(normalizedEmail);
+          setEmail(normalizedEmail);
+          setStep(status.registered ? "password" : "register");
+        } finally {
+          setCheckingEmail(false);
+        }
        return;
      }
+
+      if (step === "register") {
+        await registerRequest(email, name, username, password);
+        setSuccess("Account created. Verify email and continue login.");
+        setStep("password");
+        return;
+      }
+
+      if (step === "password") {
+        await login(email, password);
+        return;
+      }
+
      await login(email, password, otpCode.trim() || undefined);
-    } catch {
-      setError("Auth request failed.");
+    } catch (err) {
+      const message = getErrorMessage(err);
+      if (step === "password" && message.toLowerCase().includes("2fa code required")) {
+        setStep("otp");
+        setError(null);
+        setSuccess("Enter 2FA code.");
+        return;
+      }
+      setError(message);
+      setSuccess(null);
    }
  }

+  function resetToEmail() {
+    setStep("email");
+    setPassword("");
+    setOtpCode("");
+    setName("");
+    setUsername("");
+    setError(null);
+    setSuccess(null);
+  }
+
+  const submitLabel =
+    step === "email"
+      ? "Continue"
+      : step === "register"
+        ? "Create account"
+        : step === "password"
+          ? "Next"
+          : "Sign in";
+
+  const isBusy = loading || checkingEmail;
+
  return (
-    <div className="mx-auto mt-16 w-full max-w-md rounded-xl bg-panel p-6 shadow-xl">
-      <div className="mb-4 flex gap-2">
-        <button className={`rounded px-3 py-2 ${mode === "login" ? "bg-accent text-black" : "bg-slate-700"}`} onClick={() => setMode("login")}>
-          Login
-        </button>
-        <button className={`rounded px-3 py-2 ${mode === "register" ? "bg-accent text-black" : "bg-slate-700"}`} onClick={() => setMode("register")}>
-          Register
-        </button>
-      </div>
+    <div className="mx-auto mt-16 w-full max-w-md rounded-2xl border border-slate-700/70 bg-panel p-6 shadow-xl">
+      <p className="mb-1 text-xl font-semibold">
+        {step === "email" ? "Sign in to BenyaMessenger" : step === "register" ? "Create account" : "Enter credentials"}
+      </p>
+      <p className="mb-4 text-sm text-slate-400">
+        {step === "email"
+          ? "Enter your email to continue"
+          : step === "register"
+            ? "This email is not registered yet. Complete registration."
+            : step === "password"
+              ? "Enter your password"
+              : "Two-factor authentication is enabled"}
+      </p>
+
      <form className="space-y-3" onSubmit={onSubmit}>
-        <input className="w-full rounded bg-slate-800 px-3 py-2" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
-        {mode === "register" && (
-          <>
-            <input className="w-full rounded bg-slate-800 px-3 py-2" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
-            <input className="w-full rounded bg-slate-800 px-3 py-2" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
-          </>
-        )}
-        <input className="w-full rounded bg-slate-800 px-3 py-2" placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
-        {mode === "login" ? (
+        <div className="space-y-2">
          <input
            className="w-full rounded bg-slate-800 px-3 py-2"
-            placeholder="2FA code (if enabled)"
+            disabled={step !== "email"}
+            placeholder="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          {step !== "email" ? (
+            <button className="text-xs text-sky-300 hover:text-sky-200" onClick={resetToEmail} type="button">
+              Change email
+            </button>
+          ) : null}
+        </div>
+
+        {step === "register" ? (
+          <>
+            <input className="w-full rounded bg-slate-800 px-3 py-2" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
+            <input
+              className="w-full rounded bg-slate-800 px-3 py-2"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value.replace("@", ""))}
+            />
+          </>
+        ) : null}
+
+        {step === "password" || step === "register" || step === "otp" ? (
+          <input
+            className="w-full rounded bg-slate-800 px-3 py-2"
+            placeholder="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        ) : null}
+
+        {step === "otp" ? (
+          <input
+            className="w-full rounded bg-slate-800 px-3 py-2"
+            placeholder="2FA code"
            value={otpCode}
            onChange={(e) => setOtpCode(e.target.value.replace(/\D/g, "").slice(0, 8))}
          />
        ) : null}
-        <button className="w-full rounded bg-accent px-3 py-2 font-semibold text-black disabled:opacity-50" disabled={loading} type="submit">
-          {mode === "login" ? "Sign in" : "Create account"}
+
+        <button className="w-full rounded bg-accent px-3 py-2 font-semibold text-black disabled:opacity-50" disabled={isBusy} type="submit">
+          {submitLabel}
        </button>
      </form>
      {error ? <p className="mt-3 text-sm text-red-400">{error}</p> : null}
@@ -69,3 +159,19 @@ export function AuthPanel() {
    </div>
  );
 }
+
+function getErrorMessage(err: unknown): string {
+  if (axios.isAxiosError(err)) {
+    const detail = err.response?.data?.detail;
+    if (typeof detail === "string" && detail.trim()) {
+      return detail;
+    }
+    if (typeof err.message === "string" && err.message.trim()) {
+      return err.message;
+    }
+  }
+  if (err instanceof Error && err.message) {
+    return err.message;
+  }
+  return "Auth request failed.";
+}
--- a/web/src/components/SettingsPanel.tsx
+++ b/web/src/components/SettingsPanel.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
+import QRCode from "qrcode";
 import { listBlockedUsers, updateMyProfile } from "../api/users";
 import { disableTwoFactor, enableTwoFactor, listSessions, revokeAllSessions, revokeSession, setupTwoFactor } from "../api/auth";
 import type { AuthSession, AuthUser } from "../chat/types";
@@ -15,6 +16,7 @@ interface Props {

 export function SettingsPanel({ open, onClose }: Props) {
  const me = useAuthStore((s) => s.me);
+  const logout = useAuthStore((s) => s.logout);
  const [page, setPage] = useState<SettingsPage>("main");
  const [prefs, setPrefs] = useState<AppPreferences>(() => getAppPreferences());
  const [blockedCount, setBlockedCount] = useState(0);
@@ -25,7 +27,11 @@ export function SettingsPanel({ open, onClose }: Props) {
  const [twofaCode, setTwofaCode] = useState("");
  const [twofaSecret, setTwofaSecret] = useState<string | null>(null);
  const [twofaUrl, setTwofaUrl] = useState<string | null>(null);
+  const [twofaQrUrl, setTwofaQrUrl] = useState<string | null>(null);
  const [twofaError, setTwofaError] = useState<string | null>(null);
+  const [privacyLastSeen, setPrivacyLastSeen] = useState<"everyone" | "contacts" | "nobody">("everyone");
+  const [privacyAvatar, setPrivacyAvatar] = useState<"everyone" | "contacts" | "nobody">("everyone");
+  const [privacyGroupInvites, setPrivacyGroupInvites] = useState<"everyone" | "contacts">("everyone");
  const [profileDraft, setProfileDraft] = useState({
    name: "",
    username: "",
@@ -38,6 +44,9 @@ export function SettingsPanel({ open, onClose }: Props) {
      return;
    }
    setAllowPrivateMessages(me.allow_private_messages);
+    setPrivacyLastSeen(me.privacy_last_seen || "everyone");
+    setPrivacyAvatar(me.privacy_avatar || "everyone");
+    setPrivacyGroupInvites(me.privacy_group_invites || "everyone");
    setProfileDraft({
      name: me.name || "",
      username: me.username || "",
@@ -46,6 +55,29 @@ export function SettingsPanel({ open, onClose }: Props) {
    });
  }, [me]);

+  useEffect(() => {
+    if (!twofaUrl) {
+      setTwofaQrUrl(null);
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      try {
+        const url = await QRCode.toDataURL(twofaUrl, { margin: 1, width: 192 });
+        if (!cancelled) {
+          setTwofaQrUrl(url);
+        }
+      } catch {
+        if (!cancelled) {
+          setTwofaQrUrl(null);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [twofaUrl]);
+
  useEffect(() => {
    if (!open) {
      return;
@@ -268,9 +300,62 @@ export function SettingsPanel({ open, onClose }: Props) {
              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Privacy</p>
                <SettingsTextRow label="Blocked Users" value={String(blockedCount)} />
-                <SettingsTextRow label="Who can see my profile photo?" value="Everybody" />
-                <SettingsTextRow label="Who can see my last seen?" value="Everybody" />
-                <SettingsTextRow label="Who can add me to groups?" value="Everybody" />
+                <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
+                  <p className="mb-1 text-xs text-slate-300">Who can see my profile photo?</p>
+                  <select
+                    className="w-full rounded bg-slate-800 px-2 py-1 text-xs"
+                    value={privacyAvatar}
+                    onChange={(e) => setPrivacyAvatar(e.target.value as "everyone" | "contacts" | "nobody")}
+                  >
+                    <option value="everyone">Everybody</option>
+                    <option value="contacts">My contacts</option>
+                    <option value="nobody">Nobody</option>
+                  </select>
+                </div>
+                <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
+                  <p className="mb-1 text-xs text-slate-300">Who can see my last seen?</p>
+                  <select
+                    className="w-full rounded bg-slate-800 px-2 py-1 text-xs"
+                    value={privacyLastSeen}
+                    onChange={(e) => setPrivacyLastSeen(e.target.value as "everyone" | "contacts" | "nobody")}
+                  >
+                    <option value="everyone">Everybody</option>
+                    <option value="contacts">My contacts</option>
+                    <option value="nobody">Nobody</option>
+                  </select>
+                </div>
+                <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
+                  <p className="mb-1 text-xs text-slate-300">Who can add me to groups?</p>
+                  <select
+                    className="w-full rounded bg-slate-800 px-2 py-1 text-xs"
+                    value={privacyGroupInvites}
+                    onChange={(e) => setPrivacyGroupInvites(e.target.value as "everyone" | "contacts")}
+                  >
+                    <option value="everyone">Everybody</option>
+                    <option value="contacts">My contacts</option>
+                  </select>
+                </div>
+                <button
+                  className="w-full rounded bg-sky-500 px-3 py-2 text-sm font-semibold text-slate-950 disabled:opacity-60"
+                  onClick={async () => {
+                    setSavingPrivacy(true);
+                    try {
+                      const updated = await updateMyProfile({
+                        allow_private_messages: allowPrivateMessages,
+                        privacy_last_seen: privacyLastSeen,
+                        privacy_avatar: privacyAvatar,
+                        privacy_group_invites: privacyGroupInvites,
+                      });
+                      useAuthStore.setState({ me: updated as AuthUser });
+                    } finally {
+                      setSavingPrivacy(false);
+                    }
+                  }}
+                  disabled={savingPrivacy}
+                  type="button"
+                >
+                  {savingPrivacy ? "Saving..." : "Save privacy settings"}
+                </button>
              </section>
              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                <CheckboxOption
@@ -316,6 +401,11 @@ export function SettingsPanel({ open, onClose }: Props) {
                      <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
                        <p className="text-[11px] text-slate-400">Secret</p>
                        <p className="break-all text-xs text-slate-200">{twofaSecret}</p>
+                        {twofaQrUrl ? (
+                          <div className="mt-2 rounded bg-white p-2">
+                            <img alt="TOTP QR" className="mx-auto h-44 w-44" src={twofaQrUrl} />
+                          </div>
+                        ) : null}
                        {twofaUrl ? <p className="mt-1 break-all text-[11px] text-slate-500">{twofaUrl}</p> : null}
                      </div>
                    ) : null}
@@ -362,6 +452,7 @@ export function SettingsPanel({ open, onClose }: Props) {
                          setTwofaCode("");
                          setTwofaSecret(null);
                          setTwofaUrl(null);
+                          setTwofaQrUrl(null);
                        } catch {
                          setTwofaError("Invalid 2FA code");
                        }
@@ -382,6 +473,8 @@ export function SettingsPanel({ open, onClose }: Props) {
                    onClick={async () => {
                      await revokeAllSessions();
                      setSessions([]);
+                      logout();
+                      onClose();
                    }}
                    type="button"
                  >
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -6,12 +6,12 @@

 :root {
  --bm-font-size: 16px;
-  --bm-bg-primary: #101e30;
-  --bm-bg-secondary: #162233;
-  --bm-bg-tertiary: #19283a;
-  --bm-text-color: #e5edf9;
-  --bm-panel-bg: rgba(19, 31, 47, 0.9);
-  --bm-panel-border: rgba(146, 174, 208, 0.14);
+  --bm-bg-primary: #0e1621;
+  --bm-bg-secondary: #111b27;
+  --bm-bg-tertiary: #0f1a26;
+  --bm-text-color: #e6edf5;
+  --bm-panel-bg: rgba(23, 33, 43, 0.96);
+  --bm-panel-border: rgba(120, 146, 171, 0.22);
 }

 html,
@@ -25,8 +25,8 @@ body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: var(--bm-font-size, 16px);
  background:
-    radial-gradient(circle at 22% 18%, rgba(36, 68, 117, 0.35), transparent 26%),
-    radial-gradient(circle at 82% 12%, rgba(24, 95, 102, 0.25), transparent 30%),
+    radial-gradient(circle at 16% 12%, rgba(45, 85, 132, 0.24), transparent 28%),
+    radial-gradient(circle at 88% 16%, rgba(36, 112, 122, 0.14), transparent 30%),
    linear-gradient(180deg, var(--bm-bg-primary) 0%, var(--bm-bg-secondary) 55%, var(--bm-bg-tertiary) 100%);
  color: var(--bm-text-color);
 }
@@ -43,9 +43,9 @@ body {

 .tg-chat-wallpaper {
  background:
-    radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.09), transparent 30%),
-    radial-gradient(circle at 86% 74%, rgba(34, 197, 94, 0.07), transparent 33%),
-    linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.015) 100%);
+    radial-gradient(circle at 14% 18%, rgba(51, 144, 236, 0.1), transparent 32%),
+    radial-gradient(circle at 86% 74%, rgba(66, 124, 173, 0.09), transparent 35%),
+    linear-gradient(160deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.01) 100%);
 }

 .tg-scrollbar::-webkit-scrollbar {
@@ -53,47 +53,132 @@ body {
 }

 .tg-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(126, 159, 201, 0.35);
+  background: rgba(113, 145, 177, 0.45);
  border-radius: 999px;
 }

+html[data-theme="dark"] .bg-slate-900\/95,
+html[data-theme="dark"] .bg-slate-900\/90,
+html[data-theme="dark"] .bg-slate-900\/80,
+html[data-theme="dark"] .bg-slate-900\/70,
+html[data-theme="dark"] .bg-slate-900\/65,
+html[data-theme="dark"] .bg-slate-900\/60,
+html[data-theme="dark"] .bg-slate-900\/50,
+html[data-theme="dark"] .bg-slate-900 {
+  background-color: rgba(23, 33, 43, 0.95) !important;
+}
+
+html[data-theme="dark"] .bg-slate-800\/80,
+html[data-theme="dark"] .bg-slate-800\/70,
+html[data-theme="dark"] .bg-slate-800\/60,
+html[data-theme="dark"] .bg-slate-800\/50,
+html[data-theme="dark"] .bg-slate-800 {
+  background-color: rgba(28, 40, 52, 0.95) !important;
+}
+
+html[data-theme="dark"] .bg-slate-700\/80,
+html[data-theme="dark"] .bg-slate-700\/70,
+html[data-theme="dark"] .bg-slate-700\/60,
+html[data-theme="dark"] .bg-slate-700 {
+  background-color: rgba(44, 58, 73, 0.95) !important;
+}
+
+html[data-theme="dark"] .border-slate-700\/80,
+html[data-theme="dark"] .border-slate-700\/70,
+html[data-theme="dark"] .border-slate-700\/60,
+html[data-theme="dark"] .border-slate-700\/50,
+html[data-theme="dark"] .border-slate-700,
+html[data-theme="dark"] .border-slate-800\/60,
+html[data-theme="dark"] .border-slate-800,
+html[data-theme="dark"] .border-slate-900 {
+  border-color: rgba(88, 114, 138, 0.42) !important;
+}
+
+html[data-theme="dark"] .text-slate-100 {
+  color: #f3f7fb !important;
+}
+
+html[data-theme="dark"] .text-slate-200 {
+  color: #d9e4ef !important;
+}
+
+html[data-theme="dark"] .text-slate-300 {
+  color: #b9cbdd !important;
+}
+
+html[data-theme="dark"] .text-slate-400 {
+  color: #92a8bd !important;
+}
+
+html[data-theme="dark"] .hover\:bg-slate-800\/70:hover,
+html[data-theme="dark"] .hover\:bg-slate-800\/65:hover,
+html[data-theme="dark"] .hover\:bg-slate-800\/60:hover,
+html[data-theme="dark"] .hover\:bg-slate-800:hover,
+html[data-theme="dark"] .hover\:bg-slate-700\/80:hover,
+html[data-theme="dark"] .hover\:bg-slate-700:hover {
+  background-color: rgba(46, 62, 79, 0.96) !important;
+}
+
+html[data-theme="dark"] .bg-sky-500,
+html[data-theme="dark"] .bg-sky-500\/30 {
+  background-color: rgba(51, 144, 236, 0.92) !important;
+}
+
+html[data-theme="dark"] .hover\:bg-sky-400:hover {
+  background-color: rgba(88, 167, 244, 0.95) !important;
+}
+
+html[data-theme="dark"] .text-slate-950 {
+  color: #04101d !important;
+}
+
+html[data-theme="dark"] .from-sky-500\/95 {
+  --tw-gradient-from: rgba(51, 144, 236, 0.94) var(--tw-gradient-from-position) !important;
+}
+
+html[data-theme="dark"] .to-sky-600\/90 {
+  --tw-gradient-to: rgba(40, 124, 209, 0.94) var(--tw-gradient-to-position) !important;
+}
+
 html[data-theme="light"] {
-  --bm-bg-primary: #eaf1fb;
-  --bm-bg-secondary: #f3f7fd;
-  --bm-bg-tertiary: #fbfdff;
-  --bm-text-color: #0f172a;
-  --bm-panel-bg: rgba(255, 255, 255, 0.96);
-  --bm-panel-border: rgba(15, 23, 42, 0.14);
+  --bm-bg-primary: #dfe5ec;
+  --bm-bg-secondary: #e8edf4;
+  --bm-bg-tertiary: #eff3f8;
+  --bm-text-color: #1b2733;
+  --bm-panel-bg: rgba(255, 255, 255, 0.98);
+  --bm-panel-border: rgba(82, 105, 128, 0.24);
 }

 html[data-theme="light"] .tg-chat-wallpaper {
  background:
-    radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.09), transparent 32%),
-    radial-gradient(circle at 86% 74%, rgba(14, 165, 233, 0.06), transparent 35%),
-    linear-gradient(160deg, rgba(148, 163, 184, 0.08) 0%, rgba(148, 163, 184, 0.03) 100%);
+    radial-gradient(circle at 14% 18%, rgba(51, 144, 236, 0.08), transparent 32%),
+    radial-gradient(circle at 86% 74%, rgba(93, 129, 163, 0.07), transparent 35%),
+    linear-gradient(160deg, rgba(125, 144, 164, 0.09) 0%, rgba(125, 144, 164, 0.02) 100%);
 }

 html[data-theme="light"] .bg-slate-900\/95,
 html[data-theme="light"] .bg-slate-900\/90,
 html[data-theme="light"] .bg-slate-900\/80,
 html[data-theme="light"] .bg-slate-900\/70,
+html[data-theme="light"] .bg-slate-900\/65,
 html[data-theme="light"] .bg-slate-900\/60,
 html[data-theme="light"] .bg-slate-900 {
-  background-color: rgba(255, 255, 255, 0.97) !important;
+  background-color: rgba(255, 255, 255, 0.98) !important;
 }

 html[data-theme="light"] .bg-slate-800\/80,
 html[data-theme="light"] .bg-slate-800\/70,
 html[data-theme="light"] .bg-slate-800\/60,
+html[data-theme="light"] .bg-slate-800\/50,
 html[data-theme="light"] .bg-slate-800 {
-  background-color: rgba(241, 245, 249, 0.95) !important;
+  background-color: rgba(242, 246, 251, 0.97) !important;
 }

 html[data-theme="light"] .bg-slate-700\/80,
 html[data-theme="light"] .bg-slate-700\/70,
 html[data-theme="light"] .bg-slate-700\/60,
 html[data-theme="light"] .bg-slate-700 {
-  background-color: rgba(226, 232, 240, 0.95) !important;
+  background-color: rgba(225, 233, 242, 0.97) !important;
 }

 html[data-theme="light"] .border-slate-700\/80,
@@ -101,39 +186,39 @@ html[data-theme="light"] .border-slate-700\/70,
 html[data-theme="light"] .border-slate-700\/60,
 html[data-theme="light"] .border-slate-700\/50,
 html[data-theme="light"] .border-slate-700 {
-  border-color: rgba(71, 85, 105, 0.28) !important;
+  border-color: rgba(96, 120, 145, 0.3) !important;
 }

 html[data-theme="light"] .text-slate-100 {
-  color: #0f172a !important;
+  color: #1b2733 !important;
 }

 html[data-theme="light"] .text-slate-200 {
-  color: #1e293b !important;
+  color: #223446 !important;
 }

 html[data-theme="light"] .text-slate-300 {
-  color: #334155 !important;
+  color: #385066 !important;
 }

 html[data-theme="light"] .text-slate-400 {
-  color: #64748b !important;
+  color: #5e748b !important;
 }

 html[data-theme="light"] .text-slate-500 {
-  color: #94a3b8 !important;
+  color: #7f95ab !important;
 }

 html[data-theme="light"] .hover\:bg-slate-800\/70:hover,
 html[data-theme="light"] .hover\:bg-slate-800\/65:hover,
 html[data-theme="light"] .hover\:bg-slate-800\/60:hover,
 html[data-theme="light"] .hover\:bg-slate-800:hover {
-  background-color: rgba(226, 232, 240, 0.95) !important;
+  background-color: rgba(230, 237, 245, 0.98) !important;
 }

 html[data-theme="light"] .hover\:bg-slate-700\/80:hover,
 html[data-theme="light"] .hover\:bg-slate-700:hover {
-  background-color: rgba(203, 213, 225, 0.9) !important;
+  background-color: rgba(214, 224, 235, 0.98) !important;
 }

 html[data-theme="light"] .tg-panel {
@@ -163,15 +248,23 @@ html[data-theme="light"] .text-black {
 }

 html[data-theme="light"] .bg-sky-500\/30 {
-  background-color: rgba(14, 165, 233, 0.2) !important;
+  background-color: rgba(51, 144, 236, 0.22) !important;
+}
+
+html[data-theme="light"] .bg-sky-500 {
+  background-color: #3390ec !important;
+}
+
+html[data-theme="light"] .hover\:bg-sky-400:hover {
+  background-color: #59a7f4 !important;
 }

 html[data-theme="light"] .text-sky-100 {
-  color: #0369a1 !important;
+  color: #1f79d8 !important;
 }

 html[data-theme="light"] .text-sky-300 {
-  color: #075985 !important;
+  color: #2669ad !important;
 }

 html[data-theme="light"] .text-red-400,
@@ -190,31 +283,31 @@ html[data-theme="light"] .text-emerald-400 {
 html[data-theme="light"] .border-slate-800\/60,
 html[data-theme="light"] .border-slate-800,
 html[data-theme="light"] .border-slate-900 {
-  border-color: rgba(71, 85, 105, 0.2) !important;
+  border-color: rgba(96, 120, 145, 0.24) !important;
 }

 html[data-theme="light"] .bg-slate-900\/50 {
-  background-color: rgba(248, 250, 252, 0.95) !important;
+  background-color: rgba(247, 250, 253, 0.98) !important;
 }

 html[data-theme="light"] .bg-slate-800\/50 {
-  background-color: rgba(241, 245, 249, 0.88) !important;
+  background-color: rgba(238, 244, 250, 0.94) !important;
 }

 html[data-theme="light"] .text-slate-600 {
-  color: #475569 !important;
+  color: #496078 !important;
 }

 html[data-theme="light"] .text-slate-700 {
-  color: #334155 !important;
+  color: #3e5267 !important;
 }

 html[data-theme="light"] .text-slate-800 {
-  color: #1e293b !important;
+  color: #2c3e52 !important;
 }

 html[data-theme="light"] .text-slate-900 {
-  color: #0f172a !important;
+  color: #1d2f42 !important;
 }

 html[data-theme="light"] .bg-white {
@@ -222,21 +315,29 @@ html[data-theme="light"] .bg-white {
 }

 html[data-theme="light"] .bg-slate-100 {
-  background-color: #f1f5f9 !important;
+  background-color: #eef3f8 !important;
 }

 html[data-theme="light"] .bg-slate-200 {
-  background-color: #e2e8f0 !important;
+  background-color: #dde7f1 !important;
 }

 html[data-theme="light"] .border-slate-600,
 html[data-theme="light"] .border-slate-500 {
-  border-color: rgba(100, 116, 139, 0.35) !important;
+  border-color: rgba(100, 122, 145, 0.35) !important;
 }

 html[data-theme="light"] .ring-slate-700,
 html[data-theme="light"] .ring-slate-600 {
-  --tw-ring-color: rgba(100, 116, 139, 0.35) !important;
+  --tw-ring-color: rgba(74, 126, 184, 0.35) !important;
+}
+
+html[data-theme="light"] .from-sky-500\/95 {
+  --tw-gradient-from: rgba(51, 144, 236, 0.95) var(--tw-gradient-from-position) !important;
+}
+
+html[data-theme="light"] .to-sky-600\/90 {
+  --tw-gradient-to: rgba(47, 132, 221, 0.92) var(--tw-gradient-to-position) !important;
 }

 html[data-theme="light"] .text-slate-100,