From 96b10c9148cdb3749ff632313d468a5f112cc3ce Mon Sep 17 00:00:00 2001
From: Amir Husayn Panahifar <ahp@panahifar.ir>
Date: Tue, 20 Oct 2026 17:51:23 +0330
Subject: [PATCH] =?UTF-8?q?fix(ui):=20design-system=20consistency=20?=
 =?UTF-8?q?=E2=80=94=20typography,=20borders,=20admin=20IA,=20search=20rem?=
 =?UTF-8?q?oval?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- typography: font-semibold/font-medium → font-bold throughout (card, dialog, empty-state, notification-bell, quiz-experience, questions-panel, profile-manage)
- borders: border → border-2 for content containers (leaderboard error, notifications page, quiz pass screen, quiz option tiles, learning-panel error)
- admin IA: remove Card-in-SectionPanel nesting from announce-panel, challenges-panel, physical-orders-panel; SectionPanel gains optional actions slot
- announce-panel: flat composer + live preview; history as flat list; cancel-edit button
- lockout: raw textarea → Textarea design-system component
- global-search: delete component and all references (feature removed)
- progress.tsx: dir="ltr" for correct RTL fill direction; remove rtl:me-auto
---
 frontend/src/app/lockout/page.tsx             |   5 +-
 frontend/src/app/notifications/page.tsx       |   2 +-
 .../src/components/admin/announce-panel.tsx   | 392 +++++++++---------
 .../src/components/admin/challenges-panel.tsx | 138 +++---
 .../admin/physical-orders-panel.tsx           |  23 +-
 .../src/components/admin/profile-manage.tsx   |   2 +-
 .../src/components/admin/questions-panel.tsx  |   9 +-
 frontend/src/components/empty-state.tsx       |   2 +-
 frontend/src/components/global-search.tsx     |  65 ---
 frontend/src/components/notification-bell.tsx |   4 +-
 frontend/src/components/quiz-experience.tsx   |  10 +-
 frontend/src/components/section-nav.tsx       |  13 +-
 frontend/src/components/ui/card.tsx           |   2 +-
 frontend/src/components/ui/dialog.tsx         |   2 +-
 frontend/src/components/ui/progress.tsx       |   3 +-
 15 files changed, 299 insertions(+), 373 deletions(-)
 delete mode 100644 frontend/src/components/global-search.tsx

diff --git a/frontend/src/app/lockout/page.tsx b/frontend/src/app/lockout/page.tsx
index a0be565..433aec1 100644
--- a/frontend/src/app/lockout/page.tsx
+++ b/frontend/src/app/lockout/page.tsx
@@ -8,6 +8,7 @@ import { api, http, toUserError } from "@/lib/api";
 import { MAX_HEARTS, clampHearts, hasInfiniteHearts } from "@/lib/hearts";
 import type { Mentor, User } from "@/lib/types";
 import { Card } from "@/components/ui/card";
+import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/providers";
 import { cn } from "@/lib/utils";
@@ -116,14 +117,14 @@ export default function LockoutPage() {
       </Card>
 
       <div className="mt-5 w-full space-y-2">
-        <textarea
+        <Textarea
           value={note}
           onChange={(e) => setNote(e.target.value)}
           maxLength={500}
           rows={3}
           dir="rtl"
           placeholder="اختیاری: چه آزمونی گیر کردید؟ چه کمکی لازم دارید؟"
-          className="w-full rounded-xl border-2 border-border bg-background px-3 py-2 text-sm outline-none focus-visible:border-primary/50"
+          className="min-h-0"
         />
         <div className="flex flex-col gap-2 sm:flex-row">
           <Button className="flex-1" disabled={busy || requested} onClick={() => void requestUnlock()}>
diff --git a/frontend/src/app/notifications/page.tsx b/frontend/src/app/notifications/page.tsx
index 5f06d75..4c2e225 100644
--- a/frontend/src/app/notifications/page.tsx
+++ b/frontend/src/app/notifications/page.tsx
@@ -48,7 +48,7 @@ export default function NotificationsPage() {
           <Skeleton className="h-8 w-44" />
           <Skeleton className="h-4 w-72" />
         </div>
-        <div className="rounded-2xl border border-border/70 bg-card p-6 shadow-soft">
+        <div className="rounded-2xl border-2 border-border/70 bg-card p-6 shadow-soft">
           <div className="flex items-center gap-3">
             <Skeleton className="h-10 w-10 rounded-xl" />
             <div className="flex-1 space-y-1.5">
diff --git a/frontend/src/components/admin/announce-panel.tsx b/frontend/src/components/admin/announce-panel.tsx
index 896586f..2cef70e 100644
--- a/frontend/src/components/admin/announce-panel.tsx
+++ b/frontend/src/components/admin/announce-panel.tsx
@@ -19,9 +19,9 @@ import {
 } from "lucide-react";
 import { http, toUserError } from "@/lib/api";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 import {
   Dialog,
   DialogContent,
@@ -158,231 +158,217 @@ export function AnnouncePanel() {
 
   return (
     <>
-      <div className="flex flex-col gap-6">
-      <div data-announce-compose className="grid items-start gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
-        <Card>
-          <CardHeader className="space-y-1">
-            <CardTitle className="text-base">نگارش اعلان</CardTitle>
-            <p className="text-xs text-muted-foreground">
-              به همه هنرجویان فعال می‌رسد و در مرکز اعلان‌ها دیده می‌شود.
-            </p>
-          </CardHeader>
-          <CardContent className="space-y-5">
-            <div className="space-y-2">
-              <Label className="text-sm font-bold">عنوان</Label>
-              <Input
-                value={title}
-                onChange={(e) => setTitle(e.target.value)}
-                placeholder="مثلاً جلسه زنده هفته ۴ · پنجشنبه ۲۰:۰۰"
-                className={cn("h-11 rounded-2xl", !titleOk && title.length > 0 && "border-destructive")}
-                autoFocus
-              />
-            </div>
+      {/* Composer + Live Preview */}
+      <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_18rem]">
+        {/* Form */}
+        <div className="space-y-5">
+          <div className="space-y-2">
+            <Label className="text-sm font-bold">عنوان</Label>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="مثلاً جلسه زنده هفته ۴ · پنجشنبه ۲۰:۰۰"
+              className={cn("h-11 rounded-2xl", !titleOk && title.length > 0 && "border-destructive")}
+              autoFocus
+            />
+          </div>
 
-            <div className="space-y-2">
-              <div className="flex h-5 items-center justify-between gap-3">
-                <Label className="text-sm font-bold">پیام</Label>
-                <span className="text-[11px] tabular-nums text-muted-foreground">{body.length}/۴۰۰۰</span>
-              </div>
-              <textarea
-                value={body}
-                onChange={(e) => setBody(e.target.value.slice(0, 4000))}
-                rows={5}
-                maxLength={4000}
-                className={cn(
-                  "w-full resize-y rounded-xl border bg-background px-4 py-3 text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-primary",
-                  !bodyOk && body.length > 0 ? "border-destructive/50" : "border-input"
-                )}
-                placeholder="یک جملهٔ واضح و کوتاه — لینک یا زمان را حتماً بگویید…"
-              />
-              {body.trim().length > 0 && body.trim().length < 8 && (
-                <p className="text-xs font-bold text-destructive">پیام حداقل چند کلمه باشد.</p>
-              )}
+          <div className="space-y-2">
+            <div className="flex h-5 items-center justify-between gap-3">
+              <Label className="text-sm font-bold">پیام</Label>
+              <span className="text-[11px] tabular-nums text-muted-foreground">{body.length}/۴۰۰۰</span>
             </div>
+            <Textarea
+              value={body}
+              onChange={(e) => setBody(e.target.value.slice(0, 4000))}
+              rows={5}
+              maxLength={4000}
+              className={cn("resize-y", !bodyOk && body.length > 0 ? "border-destructive/50" : "")}
+              placeholder="یک جملهٔ واضح و کوتاه — لینک یا زمان را حتماً بگویید…"
+            />
+            {body.trim().length > 0 && body.trim().length < 8 && (
+              <p className="text-xs font-bold text-destructive">پیام حداقل چند کلمه باشد.</p>
+            )}
+          </div>
 
-            <div className="space-y-2">
-              <Label className="text-sm font-bold">دسته</Label>
-              <div className="grid gap-2 sm:grid-cols-2">
-                {CATEGORIES.map((c) => {
-                  const active = category === c.id;
-                  const Icon = c.icon;
-                  return (
-                    <button
-                      key={c.id}
-                      type="button"
-                      onClick={() => setCategory(c.id)}
-                      className={cn(
-                        "grid h-[4.25rem] grid-cols-[2.25rem_minmax(0,1fr)] items-center gap-3 rounded-xl border px-3 text-right transition-colors",
-                        active ? "border-primary bg-primary/10" : "border-border hover:border-primary/40"
-                      )}
-                    >
-                      <span
-                        className={cn(
-                          "grid h-9 w-9 place-items-center rounded-xl",
-                          active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
-                        )}
-                      >
-                        <Icon className="h-4 w-4" />
-                      </span>
-                      <span className="min-w-0">
-                        <span className="block truncate text-sm font-extrabold">{c.label}</span>
-                        <span className="block truncate text-[11px] text-muted-foreground">{c.hint}</span>
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label className="flex h-5 items-center gap-1.5 text-sm font-bold">
-                <Route className="h-3.5 w-3.5" /> با زدن اعلان این صفحه باز می‌شود
-              </Label>
-              <p className="text-[11px] text-muted-foreground">خالی بگذارید تا اعلان فقط خوانده شود و صفحه‌ای باز نکند.</p>
-              <div className="flex flex-wrap gap-2">
-                {ROUTES.map((r) => (
+          <div className="space-y-2">
+            <Label className="text-sm font-bold">دسته</Label>
+            <div className="grid gap-2 sm:grid-cols-2">
+              {CATEGORIES.map((c) => {
+                const active = category === c.id;
+                const Icon = c.icon;
+                return (
                   <button
-                    key={r.path}
+                    key={c.id}
                     type="button"
-                    onClick={() => setRoute(r.path)}
+                    onClick={() => setCategory(c.id)}
                     className={cn(
-                      "inline-flex h-8 items-center rounded-full border px-3 text-xs font-bold transition-colors",
-                      route === r.path
-                        ? "border-primary bg-primary text-primary-foreground"
-                        : "border-border hover:border-primary/40"
+                      "grid h-[4.25rem] grid-cols-[2.25rem_minmax(0,1fr)] items-center gap-3 rounded-xl border px-3 text-right transition-colors",
+                      active ? "border-primary bg-primary/10" : "border-border hover:border-primary/40"
                     )}
                   >
-                    {r.label}
+                    <span
+                      className={cn(
+                        "grid h-9 w-9 place-items-center rounded-xl",
+                        active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                      )}
+                    >
+                      <Icon className="h-4 w-4" />
+                    </span>
+                    <span className="min-w-0">
+                      <span className="block truncate text-sm font-extrabold">{c.label}</span>
+                      <span className="block truncate text-[11px] text-muted-foreground">{c.hint}</span>
+                    </span>
                   </button>
-                ))}
-              </div>
-              <Input
-                value={route}
-                onChange={(e) => setRoute(e.target.value)}
-                dir="ltr"
-                className="h-10 rounded-2xl font-mono text-xs"
-                placeholder="خالی مجاز است"
-              />
-              <label className="flex items-center gap-2 text-sm font-bold">
-                <input type="checkbox" checked={pinned} onChange={(e) => setPinned(e.target.checked)} />
-                سنجاق روی درخت مهارت
-              </label>
+                );
+              })}
             </div>
+          </div>
 
-            <div className="flex flex-wrap items-center gap-3 border-t border-border pt-4">
+          <div className="space-y-2">
+            <Label className="flex h-5 items-center gap-1.5 text-sm font-bold">
+              <Route className="h-3.5 w-3.5" /> صفحه‌ای که با کلیک باز می‌شود
+            </Label>
+            <p className="text-[11px] text-muted-foreground">خالی بگذارید تا اعلان فقط خوانده شود.</p>
+            <div className="flex flex-wrap gap-2">
+              {ROUTES.map((r) => (
+                <button
+                  key={r.path}
+                  type="button"
+                  onClick={() => setRoute(r.path)}
+                  className={cn(
+                    "inline-flex h-8 items-center rounded-full border px-3 text-xs font-bold transition-colors",
+                    route === r.path
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-border hover:border-primary/40"
+                  )}
+                >
+                  {r.label}
+                </button>
+              ))}
+            </div>
+            <Input
+              value={route}
+              onChange={(e) => setRoute(e.target.value)}
+              dir="ltr"
+              className="h-10 rounded-2xl font-mono text-xs"
+              placeholder="خالی مجاز است"
+            />
+            <label className="flex items-center gap-2 text-sm font-bold">
+              <input type="checkbox" checked={pinned} onChange={(e) => setPinned(e.target.checked)} />
+              سنجاق روی درخت مهارت
+            </label>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 border-t border-border pt-4">
+            <Button
+              size="lg"
+              className="h-11 gap-2"
+              disabled={!valid}
+              onClick={() => setConfirmOpen(true)}
+            >
+              <Eye className="h-4 w-4" />
+              {editingId ? "پیش‌نمایش و ذخیره" : "پیش‌نمایش و ارسال"}
+            </Button>
+            {editingId && (
               <Button
                 size="lg"
-                className="h-11 gap-2"
-                disabled={!valid}
-                onClick={() => setConfirmOpen(true)}
+                variant="outline"
+                onClick={() => { setEditingId(null); setTitle(""); setBody(""); setPinned(false); }}
               >
-                <Eye className="h-4 w-4" />
-                پیش‌نمایش و ارسال
+                انصراف از ویرایش
               </Button>
-              {!valid && (
-                <p className="text-xs text-muted-foreground">عنوان و پیام را کامل کنید تا ادامه فعال شود.</p>
-              )}
-            </div>
-          </CardContent>
-        </Card>
+            )}
+            {!valid && (
+              <p className="text-xs text-muted-foreground">عنوان و پیام را کامل کنید تا ادامه فعال شود.</p>
+            )}
+          </div>
+        </div>
 
-        <div className="space-y-4">
-          <Card className="border bg-muted/20">
-            <CardHeader className="space-y-1 pb-3">
-              <CardTitle className="flex h-6 items-center gap-2 text-sm">
-                <Eye className="h-3.5 w-3.5" /> پیش‌نمایش زنده
-              </CardTitle>
-              <p className="text-[11px] text-muted-foreground">هم‌زمان با تایپ به‌روز می‌شود.</p>
-            </CardHeader>
-            <CardContent>
-              <PreviewCard title={title} body={body} category={category} route={route} />
-            </CardContent>
-          </Card>
+        {/* Sidebar: live preview + last sent */}
+        <div className="space-y-4 lg:sticky lg:top-24">
+          <div className="space-y-1.5">
+            <p className="flex items-center gap-1.5 text-xs font-bold text-muted-foreground">
+              <Eye className="h-3.5 w-3.5" /> پیش‌نمایش زنده
+            </p>
+            <PreviewCard title={title} body={body} category={category} route={route} />
+          </div>
 
           {lastSent && (
-            <Card className="border border-success/40 bg-success/5">
-              <CardContent className="space-y-1 pt-5 text-sm">
-                <p className="font-bold text-success">آخرین ارسال موفق</p>
-                <p className="truncate font-extrabold">{lastSent.title}</p>
-                <p className="text-xs text-muted-foreground">{lastSent.recipients} گیرنده</p>
-              </CardContent>
-            </Card>
+            <div className="rounded-xl border border-success/40 bg-success/5 px-4 py-3 text-sm">
+              <p className="font-bold text-success">آخرین ارسال موفق</p>
+              <p className="mt-0.5 truncate font-extrabold">{lastSent.title}</p>
+              <p className="text-xs text-muted-foreground">{lastSent.recipients} گیرنده</p>
+            </div>
           )}
         </div>
       </div>
 
-      <Card data-announce-list className="rounded-2xl border border-border">
-        <CardHeader>
-          <CardTitle className="text-base">اطلاعیه‌های ثبت‌شده</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {(listQ.data?.announcements ?? []).length > 0 ? (
-            <ul className="flex list-none flex-col gap-3 p-0">
-              {(listQ.data?.announcements ?? []).map((a) => {
-                const cat = CATEGORIES.find((c) => c.id === a.category);
-                const excerpt = announcementExcerpt(a.body);
-                return (
-                  <li key={a.id} className="rounded-2xl border border-border bg-background p-4">
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                      <div className="min-w-0 flex-1 space-y-2">
-                        <div className="flex flex-wrap items-center gap-2">
-                          <p className="min-w-0 text-sm font-bold leading-snug">{a.title}</p>
-                          <Badge variant="secondary" className="text-[10px]">
-                            {cat?.label ?? a.category}
-                          </Badge>
-                          {a.pinned ? (
-                            <Badge variant="gold" className="text-[10px]">
-                              سنجاق
-                            </Badge>
-                          ) : null}
-                        </div>
-                        {excerpt ? (
-                          <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground">{excerpt}</p>
-                        ) : null}
-                      </div>
-                      <div className="flex shrink-0 items-center gap-2">
-                        <Button
-                          type="button"
-                          size="sm"
-                          variant="outline"
-                          onClick={() => {
-                            setEditingId(a.id);
-                            setTitle(a.title);
-                            setBody(a.body);
-                            setCategory(a.category);
-                            setRoute(a.route);
-                            setPinned(a.pinned);
-                          }}
-                        >
-                          ویرایش
-                        </Button>
-                        <Button
-                          type="button"
-                          size="sm"
-                          variant="outline"
-                          aria-label="حذف"
-                          onClick={() => {
-                            void http
-                              .del(`/api/admin/announcements/${a.id}`)
-                              .then(() => qc.invalidateQueries({ queryKey: ["admin-announcements"] }))
-                              .catch((e) => toast.error(toUserError(e, "حذف ممکن نشد")));
-                          }}
-                        >
-                          <Trash2 className="h-3.5 w-3.5" />
-                        </Button>
-                      </div>
+      {/* History */}
+      <div className="mt-8 space-y-3 border-t border-border/70 pt-6">
+        <h3 className="text-sm font-black text-muted-foreground">اطلاعیه‌های ثبت‌شده</h3>
+        {(listQ.data?.announcements ?? []).length > 0 ? (
+          <ul className="flex list-none flex-col gap-2.5 p-0">
+            {(listQ.data?.announcements ?? []).map((a) => {
+              const cat = CATEGORIES.find((c) => c.id === a.category);
+              const excerpt = announcementExcerpt(a.body);
+              return (
+                <li key={a.id} className="flex flex-col gap-3 rounded-2xl border border-border bg-background p-4 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="min-w-0 flex-1 space-y-2">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <p className="min-w-0 text-sm font-bold leading-snug">{a.title}</p>
+                      <Badge variant="secondary" className="text-[10px]">
+                        {cat?.label ?? a.category}
+                      </Badge>
+                      {a.pinned && (
+                        <Badge variant="gold" className="text-[10px]">سنجاق</Badge>
+                      )}
                     </div>
-                  </li>
-                );
-              })}
-            </ul>
-          ) : !listQ.isPending ? (
-            <p className="rounded-2xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
-              هنوز اطلاعیه‌ای ثبت نشده است.
-            </p>
-          ) : null}
-        </CardContent>
-      </Card>
+                    {excerpt && (
+                      <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground">{excerpt}</p>
+                    )}
+                  </div>
+                  <div className="flex shrink-0 items-center gap-2">
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        setEditingId(a.id);
+                        setTitle(a.title);
+                        setBody(a.body);
+                        setCategory(a.category);
+                        setRoute(a.route);
+                        setPinned(a.pinned);
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
+                    >
+                      ویرایش
+                    </Button>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      aria-label="حذف"
+                      onClick={() => {
+                        void http
+                          .del(`/api/admin/announcements/${a.id}`)
+                          .then(() => qc.invalidateQueries({ queryKey: ["admin-announcements"] }))
+                          .catch((e) => toast.error(toUserError(e, "حذف ممکن نشد")));
+                      }}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        ) : !listQ.isPending ? (
+          <p className="rounded-2xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+            هنوز اطلاعیه‌ای ثبت نشده است.
+          </p>
+        ) : null}
       </div>
 
       <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
diff --git a/frontend/src/components/admin/challenges-panel.tsx b/frontend/src/components/admin/challenges-panel.tsx
index 2544e58..2077043 100644
--- a/frontend/src/components/admin/challenges-panel.tsx
+++ b/frontend/src/components/admin/challenges-panel.tsx
@@ -5,9 +5,9 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Plus, Trash2, Trophy } from "lucide-react";
 import { http, toUserError } from "@/lib/api";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -86,81 +86,77 @@ export function ChallengesPanel() {
       minute: "2-digit",
     }).format(new Date(iso));
 
+  const newChallenge = () =>
+    setModal({
+      id: 0,
+      title: "",
+      description: "",
+      targetXp: 500,
+      startsAt: "",
+      endsAt: "",
+      isActive: true,
+      createdAt: "",
+    });
+
   return (
     <>
       {dialog}
-      <Card>
-        <CardHeader className="flex-row items-center justify-between gap-4">
-          <div>
-            <CardTitle className="text-base">چالش‌های امتیاز</CardTitle>
-            <p className="mt-1 text-xs text-muted-foreground">
-              چالش ماهانه با هدف امتیاز؛ پیشرفت هنرجو با تکمیل آزمون‌ها به‌روز می‌شود.
-            </p>
-          </div>
-          <Button
-            className="gap-1.5"
-            onClick={() =>
-              setModal({
-                id: 0,
-                title: "",
-                description: "",
-                targetXp: 500,
-                startsAt: "",
-                endsAt: "",
-                isActive: true,
-                createdAt: "",
-              })
-            }
-          >
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-4">
+          <p className="text-xs text-muted-foreground">
+            پیشرفت هنرجو با تکمیل آزمون‌ها به‌روز می‌شود.
+          </p>
+          <Button className="shrink-0 gap-1.5" onClick={newChallenge}>
             <Plus className="h-4 w-4" /> چالش جدید
           </Button>
-        </CardHeader>
-        <CardContent>
-          {isLoading && (
-            <div className="space-y-3">
-              {[0, 1].map((i) => (
-                <Skeleton key={i} className="h-20 rounded-xl" />
-              ))}
-            </div>
-          )}
-          {isError && (
-            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm">
-              <p className="font-medium text-destructive">{toUserError(error)}</p>
-              <Button size="sm" variant="outline" className="mt-2" onClick={() => refetch()}>
-                تلاش دوباره
-              </Button>
-            </div>
-          )}
-          <div className="grid gap-3 sm:grid-cols-2">
-            {(data?.challenges ?? []).map((c) => (
-              <div key={c.id} className="rounded-md border border-border p-4">
-                <div className="flex items-center gap-2">
-                  <Trophy className="h-4 w-4 text-gold" />
-                  <Badge variant={c.isActive ? "success" : "secondary"}>{c.isActive ? "فعال" : "خاموش"}</Badge>
-                  <Badge variant="accent">هدف {formatFaNumber(c.targetXp)} امتیاز</Badge>
-                  <div className="ms-auto flex gap-1">
-                    <Button size="sm" variant="outline" className="h-7 px-2" onClick={() => setModal({ ...c })}>
-                      ویرایش
-                    </Button>
-                    <Button size="sm" variant="ghost" className="h-7 px-2 text-destructive" onClick={() => del(c)}>
-                      <Trash2 className="h-3.5 w-3.5" />
-                    </Button>
-                  </div>
-                </div>
-                <p className="mt-2 font-medium">{c.title}</p>
-                <p className="line-clamp-2 text-xs text-muted-foreground">{c.description || "—"}</p>
-                <p className="mt-1.5 text-xs text-muted-foreground">
-                  {fmt(c.startsAt)} تا {fmt(c.endsAt)}
-                </p>
-              </div>
+        </div>
+
+        {isLoading && (
+          <div className="space-y-3">
+            {[0, 1].map((i) => (
+              <Skeleton key={i} className="h-20 rounded-xl" />
             ))}
           </div>
-          {!isLoading && !isError && (data?.challenges ?? []).length === 0 && (
-            <p className="py-8 text-center text-sm text-muted-foreground">هنوز چالشی نیست.</p>
-          )}
-        </CardContent>
-        <ChallengeDialog challenge={modal} onClose={() => setModal(null)} onSave={save} />
-      </Card>
+        )}
+        {isError && (
+          <div className="rounded-md border-2 border-destructive/30 bg-destructive/5 p-4 text-sm">
+            <p className="font-bold text-destructive">{toUserError(error)}</p>
+            <Button size="sm" variant="outline" className="mt-2" onClick={() => refetch()}>
+              تلاش دوباره
+            </Button>
+          </div>
+        )}
+        <div className="grid gap-3 sm:grid-cols-2">
+          {(data?.challenges ?? []).map((c) => (
+            <div key={c.id} className="rounded-xl border border-border p-4">
+              <div className="flex items-center gap-2">
+                <Trophy className="h-4 w-4 text-gold" />
+                <Badge variant={c.isActive ? "success" : "secondary"}>{c.isActive ? "فعال" : "خاموش"}</Badge>
+                <Badge variant="accent">هدف {formatFaNumber(c.targetXp)} امتیاز</Badge>
+                <div className="ms-auto flex gap-1">
+                  <Button size="sm" variant="outline" className="h-7 px-2" onClick={() => setModal({ ...c })}>
+                    ویرایش
+                  </Button>
+                  <Button size="sm" variant="ghost" className="h-7 px-2 text-destructive" onClick={() => del(c)}>
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+              <p className="mt-2 font-bold">{c.title}</p>
+              <p className="line-clamp-2 text-xs text-muted-foreground">{c.description || "—"}</p>
+              <p className="mt-1.5 text-xs text-muted-foreground">
+                {fmt(c.startsAt)} تا {fmt(c.endsAt)}
+              </p>
+            </div>
+          ))}
+        </div>
+        {!isLoading && !isError && (data?.challenges ?? []).length === 0 && (
+          <p className="rounded-2xl border border-dashed border-border px-4 py-6 text-center text-sm text-muted-foreground">
+            هنوز چالشی نیست.
+          </p>
+        )}
+      </div>
+      <ChallengeDialog challenge={modal} onClose={() => setModal(null)} onSave={save} />
     </>
   );
 }
@@ -199,11 +195,11 @@ function ChallengeDialog({
             </div>
             <div className="space-y-1.5">
               <Label>توضیحات</Label>
-              <textarea
+              <Textarea
                 value={draft.description}
                 onChange={(e) => set({ description: e.target.value })}
                 rows={3}
-                className="w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                className="resize-y"
                 placeholder="هدف و انگیزهٔ چالش…"
               />
             </div>
diff --git a/frontend/src/components/admin/physical-orders-panel.tsx b/frontend/src/components/admin/physical-orders-panel.tsx
index ddc725a..61d2409 100644
--- a/frontend/src/components/admin/physical-orders-panel.tsx
+++ b/frontend/src/components/admin/physical-orders-panel.tsx
@@ -6,7 +6,6 @@ import { Loader2 } from "lucide-react";
 import { http, toUserError } from "@/lib/api";
 import type { CertificatePhysicalOrder, PhysicalCertSettings, PhysicalOrderStatus } from "@/lib/types";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/providers";
@@ -75,16 +74,16 @@ export function PhysicalOrdersPanel() {
   };
 
   return (
-    <Card>
-      <CardHeader className="flex flex-row flex-wrap items-center justify-between gap-3 space-y-0">
-        <CardTitle className="text-base">فهرست سفارش‌ها</CardTitle>
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <p className="text-xs text-muted-foreground">پیگیری درخواست و ارسال گواهینامه فیزیکی.</p>
         <div className="flex flex-wrap items-center gap-2">
           <select
             className="h-10 rounded-lg border border-input bg-card px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
             value={statusFilter}
             onChange={(e) => setStatusFilter(e.target.value)}
           >
-            <option value="">همه</option>
+            <option value="">همه وضعیت‌ها</option>
             <option value="requested">درخواست‌شده</option>
             <option value="paid">پرداخت‌شده</option>
             <option value="shipped">ارسال‌شده</option>
@@ -97,15 +96,15 @@ export function PhysicalOrdersPanel() {
             </span>
           )}
         </div>
-      </CardHeader>
-      <CardContent className="space-y-2">
+      </div>
+      <div className="space-y-2">
         {isLoading && (
           <div className="flex justify-center py-8">
             <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
           </div>
         )}
         {(data?.orders ?? []).map((o) => (
-          <div key={o.id} className="space-y-2 rounded-md border border-border px-3 py-3">
+          <div key={o.id} className="space-y-2 rounded-xl border border-border px-3 py-3">
             <div className="flex flex-wrap items-center justify-between gap-2">
               <div>
                 <p className="text-sm font-medium">{o.userName ?? `کاربر ${o.userId}`}</p>
@@ -167,7 +166,9 @@ export function PhysicalOrdersPanel() {
           </div>
         ))}
         {!isLoading && (data?.orders ?? []).length === 0 && (
-          <p className="py-8 text-center text-sm text-muted-foreground">سفارشی نیست.</p>
+          <p className="rounded-2xl border border-dashed border-border px-4 py-6 text-center text-sm text-muted-foreground">
+            سفارشی نیست.
+          </p>
         )}
         <ListPagination
           page={page}
@@ -175,7 +176,7 @@ export function PhysicalOrdersPanel() {
           total={data?.total ?? 0}
           onPageChange={setPage}
         />
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 }
diff --git a/frontend/src/components/admin/profile-manage.tsx b/frontend/src/components/admin/profile-manage.tsx
index d877046..e6df25c 100644
--- a/frontend/src/components/admin/profile-manage.tsx
+++ b/frontend/src/components/admin/profile-manage.tsx
@@ -238,7 +238,7 @@ function AccountFact({
         {icon}
         {label}
       </dt>
-      <dd className={cn("mt-1.5 text-sm font-semibold leading-relaxed [overflow-wrap:anywhere]", ltr && "font-latin")} dir={ltr ? "ltr" : undefined}>
+      <dd className={cn("mt-1.5 text-sm font-bold leading-relaxed [overflow-wrap:anywhere]", ltr && "font-latin")} dir={ltr ? "ltr" : undefined}>
         {value}
       </dd>
     </div>
diff --git a/frontend/src/components/admin/questions-panel.tsx b/frontend/src/components/admin/questions-panel.tsx
index 9ef3670..a1a26f8 100644
--- a/frontend/src/components/admin/questions-panel.tsx
+++ b/frontend/src/components/admin/questions-panel.tsx
@@ -10,6 +10,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import {
   Dialog,
@@ -338,15 +339,15 @@ function QuestionDialog({
             <div className="space-y-5">
               <div className="space-y-2">
                 <Label className="text-sm font-bold">متن سوال</Label>
-                <textarea
+                <Textarea
                   value={draft.question}
                   onChange={(e) => set({ question: e.target.value })}
                   rows={3}
                   autoFocus
                   placeholder="مثلاً نتیجهٔ اجرای git status چیست؟"
                   className={cn(
-                    "w-full resize-y rounded-xl border bg-background px-4 py-3 text-base font-medium leading-relaxed focus:outline-none focus:ring-2 focus:ring-primary",
-                    questionOk ? "border-input" : "border-destructive/40"
+                    "resize-y",
+                    questionOk ? "" : "border-destructive/40"
                   )}
                 />
                 {!questionOk && (
@@ -485,7 +486,7 @@ function QuestionDialog({
                       >
                         <span
                           className={cn(
-                            "flex h-7 min-w-7 shrink-0 items-center justify-center rounded-md border px-1.5 text-[11px] font-semibold",
+                            "flex h-7 min-w-7 shrink-0 items-center justify-center rounded-md border px-1.5 text-[11px] font-bold",
                             isAns
                               ? "border-primary bg-primary text-primary-foreground"
                               : "border-border text-muted-foreground"
diff --git a/frontend/src/components/empty-state.tsx b/frontend/src/components/empty-state.tsx
index a7d65fa..c20311a 100644
--- a/frontend/src/components/empty-state.tsx
+++ b/frontend/src/components/empty-state.tsx
@@ -27,7 +27,7 @@ export function EmptyState({
         </span>
       )}
       <div className="space-y-1 px-6">
-        <p className="text-sm font-semibold">{title}</p>
+        <p className="text-sm font-bold">{title}</p>
         {description && <p className="text-xs leading-relaxed text-muted-foreground sm:text-sm">{description}</p>}
       </div>
       {action && <div className="mt-1">{action}</div>}
diff --git a/frontend/src/components/global-search.tsx b/frontend/src/components/global-search.tsx
deleted file mode 100644
index ff77f32..0000000
--- a/frontend/src/components/global-search.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { Search } from "lucide-react";
-import { http } from "@/lib/api";
-
-type Hit = { kind: string; title: string; href: string };
-
-export function GlobalSearch() {
-  const router = useRouter();
-  const [q, setQ] = useState("");
-  const [hits, setHits] = useState<Hit[]>([]);
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    const query = q.trim();
-    if (query.length < 2) {
-      setHits([]);
-      return;
-    }
-    const t = setTimeout(() => {
-      void http
-        .get<{ results: Hit[] }>(`/api/search?q=${encodeURIComponent(query)}`)
-        .then((res) => setHits(res.results ?? []))
-        .catch(() => setHits([]));
-    }, 250);
-    return () => clearTimeout(t);
-  }, [q]);
-
-  return (
-    <div className="relative min-w-0 w-28 sm:w-56">
-      <Search className="pointer-events-none absolute start-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-      <input
-        value={q}
-        onChange={(e) => {
-          setQ(e.target.value);
-          setOpen(true);
-        }}
-        onFocus={() => setOpen(true)}
-        placeholder="جستجو"
-        className="h-9 w-full rounded-full border border-border bg-background/70 ps-8 pe-3 text-sm outline-none focus:border-primary"
-      />
-      {open && hits.length > 0 && (
-        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-xl border bg-popover shadow-lg">
-          {hits.map((h) => (
-            <button
-              key={h.kind + h.href + h.title}
-              type="button"
-              className="block w-full px-3 py-2 text-start text-sm hover:bg-muted"
-              onClick={() => {
-                setOpen(false);
-                setQ("");
-                router.push(h.href);
-              }}
-            >
-              <span className="text-[10px] text-muted-foreground">{h.kind}</span>
-              <span className="block truncate font-bold">{h.title}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/frontend/src/components/notification-bell.tsx b/frontend/src/components/notification-bell.tsx
index ea2bafa..4419d61 100644
--- a/frontend/src/components/notification-bell.tsx
+++ b/frontend/src/components/notification-bell.tsx
@@ -64,7 +64,7 @@ export function NotificationBell() {
         <div dir="rtl" className="text-start">
           <div className="flex items-center justify-between gap-3 border-b border-border px-3 py-2.5">
             <div className="min-w-0">
-              <p className="text-sm font-semibold">اعلان‌ها</p>
+              <p className="text-sm font-bold">اعلان‌ها</p>
               <p className="text-[11px] text-muted-foreground">
                 {unread > 0 ? `${unread} خوانده‌نشده` : "همه خوانده شده"}
               </p>
@@ -133,7 +133,7 @@ export function NotificationBell() {
           <button
             type="button"
             onClick={() => router.push("/notifications")}
-            className="w-full border-t border-border bg-muted/40 py-2.5 text-xs font-semibold text-primary hover:bg-muted"
+            className="w-full border-t border-border bg-muted/40 py-2.5 text-xs font-bold text-primary hover:bg-muted"
           >
             مشاهده همه اعلان‌ها
           </button>
diff --git a/frontend/src/components/quiz-experience.tsx b/frontend/src/components/quiz-experience.tsx
index 07977c5..e9f55f5 100644
--- a/frontend/src/components/quiz-experience.tsx
+++ b/frontend/src/components/quiz-experience.tsx
@@ -119,7 +119,7 @@ export function QuizExperience({ lessonId }: { lessonId: number }) {
     return (
       <Card className="mx-auto max-w-md p-8 text-center">
         <Lock className="mx-auto mb-3 h-10 w-10 text-destructive" />
-        <h2 className="mb-2 text-lg font-semibold">آزمون در دسترس نیست</h2>
+        <h2 className="mb-2 text-lg font-bold">آزمون در دسترس نیست</h2>
         <p className="mb-4 text-sm text-muted-foreground">{msg}</p>
         <Button onClick={() => router.push(`/player/${lessonId}`)}>ابتدا درس را تماشا کنید</Button>
       </Card>
@@ -188,7 +188,7 @@ export function QuizExperience({ lessonId }: { lessonId: number }) {
                 <Badge variant="secondary" className="h-6 w-6 justify-center rounded-md p-0">
                   {qi + 1}
                 </Badge>
-                <p className="font-medium leading-snug">{q.question}</p>
+                <p className="font-bold leading-snug">{q.question}</p>
               </div>
               <div className="grid gap-2">
                 {q.options.map((opt, oi) => {
@@ -198,7 +198,7 @@ export function QuizExperience({ lessonId }: { lessonId: number }) {
                       key={oi}
                       onClick={() => select(q.id, oi)}
                       className={cn(
-                        "flex items-center gap-3 rounded-md border px-4 py-3 text-right text-sm transition-colors",
+                        "flex items-center gap-3 rounded-md border-2 px-4 py-3 text-right text-sm transition-colors",
                         active
                           ? "border-primary bg-primary/10 ring-1 ring-primary"
                           : "border-border hover:bg-muted/50"
@@ -206,7 +206,7 @@ export function QuizExperience({ lessonId }: { lessonId: number }) {
                     >
                       <span
                         className={cn(
-                          "flex h-7 min-w-7 shrink-0 items-center justify-center rounded-md border px-1.5 text-[11px] font-semibold",
+                          "flex h-7 min-w-7 shrink-0 items-center justify-center rounded-md border px-1.5 text-[11px] font-bold",
                           active ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground"
                         )}
                       >
@@ -305,7 +305,7 @@ function HeartsMeterInline({ hearts, infinite }: { hearts: number; infinite?: bo
 
 function PassScreen({ result, onNext, onLeagues }: { result: QuizResult; onNext: () => void; onLeagues: () => void }) {
   return (
-    <div className="mx-auto max-w-md rounded-lg border border-border bg-card p-10 text-center">
+    <div className="mx-auto max-w-md rounded-2xl border-2 border-border bg-card p-10 text-center">
       <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-lg bg-primary">
         <PartyPopper className="h-9 w-9 text-primary-foreground" />
       </div>
diff --git a/frontend/src/components/section-nav.tsx b/frontend/src/components/section-nav.tsx
index 13c509b..f2ad6a1 100644
--- a/frontend/src/components/section-nav.tsx
+++ b/frontend/src/components/section-nav.tsx
@@ -103,21 +103,26 @@ export function SectionPanel({
   titleId,
   title,
   description,
+  actions,
   children,
 }: {
   id?: string;
   titleId: string;
   title: string;
   description: string;
+  actions?: ReactNode;
   children: ReactNode;
 }) {
   return (
     <section id={id} aria-labelledby={titleId} className="min-w-0 rounded-2xl border-2 border-border bg-card">
       <header className="border-b border-border/70 px-5 py-4 sm:px-6">
-        <h2 id={titleId} className="text-lg font-black">
-          {title}
-        </h2>
-        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-0">
+            <h2 id={titleId} className="text-lg font-black">{title}</h2>
+            {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+          </div>
+          {actions && <div className="shrink-0">{actions}</div>}
+        </div>
       </header>
       <div className="p-5 sm:p-6">{children}</div>
     </section>
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index d60d1de..838d8e9 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -24,7 +24,7 @@ CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("text-xl font-semibold leading-none", className)} {...props} />
+    <div ref={ref} className={cn("text-xl font-bold leading-none", className)} {...props} />
   )
 );
 CardTitle.displayName = "CardTitle";
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 23c2ff8..808854c 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -78,7 +78,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    className={cn("text-lg font-bold leading-none tracking-tight", className)}
     {...props}
   />
 ));
diff --git a/frontend/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
index af93506..9871fe2 100644
--- a/frontend/src/components/ui/progress.tsx
+++ b/frontend/src/components/ui/progress.tsx
@@ -16,12 +16,13 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
     return (
       <div
         ref={ref}
+        dir="ltr"
         className={cn("relative h-2.5 w-full overflow-hidden rounded-full bg-muted", className)}
         {...props}
       >
         <div
           className={cn(
-            "h-full rounded-full will-change-[width] rtl:me-auto",
+            "h-full rounded-full will-change-[width]",
             gradient ? "bg-primary" : "bg-primary",
             smooth
               ? "transition-[width] duration-1000 ease-[cubic-bezier(0.22,1,0.36,1)]"