fix(ui): design-system consistency — typography, borders, admin IA, search removal

- 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

@@ -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()}>

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">

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,16 +158,10 @@ export function AnnouncePanel() {
 
   return (
     <>
-      <div className="flex flex-col gap-6">
+      {/* Composer + Live Preview */}
-      <div data-announce-compose className="grid items-start gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
+      <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_18rem]">
-        <Card>
+        {/* Form */}
-          <CardHeader className="space-y-1">
+        <div className="space-y-5">
-            <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
@@ -184,15 +178,12 @@ export function AnnouncePanel() {
               <Label className="text-sm font-bold">پیام</Label>
               <span className="text-[11px] tabular-nums text-muted-foreground">{body.length}/۴۰۰۰</span>
             </div>
-              <textarea
+            <Textarea
               value={body}
               onChange={(e) => setBody(e.target.value.slice(0, 4000))}
               rows={5}
               maxLength={4000}
-                className={cn(
+              className={cn("resize-y", !bodyOk && body.length > 0 ? "border-destructive/50" : "")}
-                  "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 && (
@@ -236,9 +227,9 @@ export function AnnouncePanel() {
 
           <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" /> با زدن اعلان این صفحه باز می‌شود
+              <Route className="h-3.5 w-3.5" /> صفحه‌ای که با کلیک باز می‌شود
             </Label>
-              <p className="text-[11px] text-muted-foreground">خالی بگذارید تا اعلان فقط خوانده شود و صفحه‌ای باز نکند.</p>
+            <p className="text-[11px] text-muted-foreground">خالی بگذارید تا اعلان فقط خوانده شود.</p>
             <div className="flex flex-wrap gap-2">
               {ROUTES.map((r) => (
                 <button
@@ -277,68 +268,65 @@ export function AnnouncePanel() {
               onClick={() => setConfirmOpen(true)}
             >
               <Eye className="h-4 w-4" />
-                پیش‌نمایش و ارسال
+              {editingId ? "پیش‌نمایش و ذخیره" : "پیش‌نمایش و ارسال"}
             </Button>
+            {editingId && (
+              <Button
+                size="lg"
+                variant="outline"
+                onClick={() => { setEditingId(null); setTitle(""); setBody(""); setPinned(false); }}
+              >
+                انصراف از ویرایش
+              </Button>
+            )}
             {!valid && (
               <p className="text-xs text-muted-foreground">عنوان و پیام را کامل کنید تا ادامه فعال شود.</p>
             )}
           </div>
-          </CardContent>
+        </div>
-        </Card>
 
-        <div className="space-y-4">
+        {/* Sidebar: live preview + last sent */}
-          <Card className="border bg-muted/20">
+        <div className="space-y-4 lg:sticky lg:top-24">
-            <CardHeader className="space-y-1 pb-3">
+          <div className="space-y-1.5">
-              <CardTitle className="flex h-6 items-center gap-2 text-sm">
+            <p className="flex items-center gap-1.5 text-xs font-bold text-muted-foreground">
               <Eye className="h-3.5 w-3.5" /> پیش‌نمایش زنده
-              </CardTitle>
+            </p>
-              <p className="text-[11px] text-muted-foreground">هم‌زمان با تایپ به‌روز می‌شود.</p>
-            </CardHeader>
-            <CardContent>
             <PreviewCard title={title} body={body} category={category} route={route} />
-            </CardContent>
+          </div>
-          </Card>
 
           {lastSent && (
-            <Card className="border border-success/40 bg-success/5">
+            <div className="rounded-xl border border-success/40 bg-success/5 px-4 py-3 text-sm">
-              <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="mt-0.5 truncate font-extrabold">{lastSent.title}</p>
               <p className="text-xs text-muted-foreground">{lastSent.recipients} گیرنده</p>
-              </CardContent>
+            </div>
-            </Card>
           )}
         </div>
       </div>
 
-      <Card data-announce-list className="rounded-2xl border border-border">
+      {/* History */}
-        <CardHeader>
+      <div className="mt-8 space-y-3 border-t border-border/70 pt-6">
-          <CardTitle className="text-base">اطلاعیه‌های ثبت‌شده</CardTitle>
+        <h3 className="text-sm font-black text-muted-foreground">اطلاعیه‌های ثبت‌شده</h3>
-        </CardHeader>
-        <CardContent>
         {(listQ.data?.announcements ?? []).length > 0 ? (
-            <ul className="flex list-none flex-col gap-3 p-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="rounded-2xl border border-border bg-background p-4">
+                <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="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 ? (
+                      {a.pinned && (
-                            <Badge variant="gold" className="text-[10px]">
+                        <Badge variant="gold" className="text-[10px]">سنجاق</Badge>
-                              سنجاق
+                      )}
-                            </Badge>
-                          ) : null}
                     </div>
-                        {excerpt ? (
+                    {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
@@ -352,6 +340,7 @@ export function AnnouncePanel() {
                         setCategory(a.category);
                         setRoute(a.route);
                         setPinned(a.pinned);
+                        window.scrollTo({ top: 0, behavior: "smooth" });
                       }}
                     >
                       ویرایش
@@ -371,7 +360,6 @@ export function AnnouncePanel() {
                       <Trash2 className="h-3.5 w-3.5" />
                     </Button>
                   </div>
-                    </div>
                 </li>
               );
             })}
@@ -381,8 +369,6 @@ export function AnnouncePanel() {
             هنوز اطلاعیه‌ای ثبت نشده است.
           </p>
         ) : null}
-        </CardContent>
-      </Card>
       </div>
 
       <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>

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,20 +86,7 @@ export function ChallengesPanel() {
       minute: "2-digit",
     }).format(new Date(iso));
 
-  return (
+  const newChallenge = () =>
-    <>
-      {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: "",
@@ -109,13 +96,21 @@ export function ChallengesPanel() {
       endsAt: "",
       isActive: true,
       createdAt: "",
-              })
+    });
-            }
+
-          >
+  return (
+    <>
+      {dialog}
+      <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>
+        </div>
-        <CardContent>
+
         {isLoading && (
           <div className="space-y-3">
             {[0, 1].map((i) => (
@@ -124,8 +119,8 @@ export function ChallengesPanel() {
           </div>
         )}
         {isError && (
-            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm">
+          <div className="rounded-md border-2 border-destructive/30 bg-destructive/5 p-4 text-sm">
-              <p className="font-medium text-destructive">{toUserError(error)}</p>
+            <p className="font-bold text-destructive">{toUserError(error)}</p>
             <Button size="sm" variant="outline" className="mt-2" onClick={() => refetch()}>
               تلاش دوباره
             </Button>
@@ -133,7 +128,7 @@ export function ChallengesPanel() {
         )}
         <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 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>
@@ -147,7 +142,7 @@ export function ChallengesPanel() {
                   </Button>
                 </div>
               </div>
-                <p className="mt-2 font-medium">{c.title}</p>
+              <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)}
@@ -156,11 +151,12 @@ export function ChallengesPanel() {
           ))}
         </div>
         {!isLoading && !isError && (data?.challenges ?? []).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>
         )}
-        </CardContent>
+      </div>
       <ChallengeDialog challenge={modal} onClose={() => setModal(null)} onSave={save} />
-      </Card>
     </>
   );
 }
@@ -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>

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>
+    <div className="space-y-4">
-      <CardHeader className="flex flex-row flex-wrap items-center justify-between gap-3 space-y-0">
+      <div className="flex flex-wrap items-center justify-between gap-3">
-        <CardTitle className="text-base">فهرست سفارش‌ها</CardTitle>
+        <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>
+      </div>
-      <CardContent className="space-y-2">
+      <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>
+      </div>
-    </Card>
+    </div>
   );
 }

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>

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",
+                    "resize-y",
-                    questionOk ? "border-input" : "border-destructive/40"
+                    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"

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>}

frontend/src/components/global-search.tsx

@@ -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>
-  );
-}

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>

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>

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">
+        <div className="flex flex-wrap items-start justify-between gap-3">
-          {title}
+          <div className="min-w-0">
-        </h2>
+            <h2 id={titleId} className="text-lg font-black">{title}</h2>
-        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+            {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>

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";

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}
   />
 ));

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)]"